2016-06-13 11 views
0

Klicken Sie auf Links wie "mehr" und "weniger" mit jquery mobile. ist es möglich? Freundlich helfen.Klicken Sie auf den Link mit jquery mobile

Dank

+0

Bitte benutzen Sie Versuche etwas? Könnten Sie Ihren Code teilen? –

+0

Hallo Martin, ich habe noch nicht angefangen zu coden. Habe einfach eine Anforderung. Grundsätzlich, wenn ich auf "mehr" Link klicke, sollte die Liste expandieren und umgekehrt. –

+0

Sie sollten immer versuchen, zuerst zu codieren, bevor Sie fragen. Aber check meine Antwort. Sie können dies nur mit CSS tun. Best Practice ist, wenn möglich, Javascript zu vermeiden. –

Antwort

0

Hallo Refre diesen Link http://jsfiddle.net/KqFRu/7/

<div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div><div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div><div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div><div> 
    <fieldset class="majorpoints"> 
    <legend class="majorpointslegend">Expand</legend> 
    <div class="hiders" style="display:none" > 
     <ul> 
      <li>cccc</li> 
      <li></li> 
     </ul> 
    </div> 
</div> 

und JS

$('.majorpoints').click(function(){ 
    $(this).find('.hiders').toggle(); 
}); 
+0

danke für die Hilfe gayathri .. –

+0

wenn es funktioniert, können Sie das beantworten, so dass es für andere hilfreich sein wird –

0

Netteste Lösung Javascript ist überhaupt nicht zu verwenden. Prüfen Sie es hier heraus: https://jsfiddle.net/zx3du1p6/1/

input[type="checkbox"] { 
    display: none; 

    &:checked ~ .list-item { 
     display: block; 
    } 
} 

.list-item { 
    display: none; 
} 

Dies verwendet jquery: https://jsfiddle.net/zx3du1p6/

$('button').click(function() { 
    $('li').toggleClass('open') 
}) 

Wenn Sie unbedingt jQuery Mobile verwenden müssen, können Sie den zusammenklappbaren Satz verwenden: https://jsfiddle.net/zx3du1p6/2/

<div data-role="collapsibleset" data-theme="a" data-content-theme="a"> 
    <div data-role="collapsible"> 
        <h3>Load more</h3> 
    <p>List goes here</p> 
    </div> 
</div> 
+0

Ich möchte dies mit jquery mobile :( –

+0

Jquery Mobile zur Antwort hinzugefügt –