javascript - Jquery Mobile，如何在单击链接后折叠可折叠的内容？杰斯 fiddle

Question

我的目标是使数据 Angular 色可折叠，在单击选项卡链接后折叠。有没有解决方案或更好的方法来解决这个问题？谢谢。

这是我的 fiddle ，请注意选项卡发生变化，但可折叠保持打开状态，我尝试使用点击功能，但它似乎没有做任何事情。

有什么想法吗？

Jfiddle

HTML

<div data-role="tabs">
  <div class="filter" data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
    <h4>Filter</h4>
    <ul data-role="listview" data-inset="false" >
         <li><a class="collapse" href="#one" data-ajax="true">Suggested</a></li>
        <li><a  href="#two" data-ajax="false">Distance</a></li>
        <li><a href="#three" data-ajax="false">Rating</a></li>
        <li><a href="#four" data-ajax="false">Open Now</a></li>
        <li><a href="five" data-ajax="false">Test</a></li>
    </ul>
</div> 

    <div id="one" class="tablist-content">

 <!-- TAB 1  --->
 1<br>1<br>1<br>1<br>1<br>1<br>

  </div>
    <div id="two" class="tablist-content" >

        <!-- TAB 2  --->
   2<br>2<br>2<br>2<br>2<br>2<br>2<br> 

    </div>
     <div id="three" class="tablist-content" >

        <!-- TAB 3  --->
   3<br>3<br>3<br>3<br>3<br>3<br>3<br>

    </div>   
      <div id="four" class="tablist-content" >

        <!-- TAB 4  --->
   4<br>4<br>4<br>4<br>4<br>


    </div>  

</div>  

脚本

$(document).ready(function() {  

    $(".collapse").click(function() {
        console.log("ok");
        $( ".filter" ).trigger( "collapse" );
    });

});

头

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

Answer 1

这里有两个问题。首先，您加载了两个版本的 jQuery。

https://code.jquery.com/jquery-1.11.3.min.js

和

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

这可能会产生冲突，因此请删除其中一个。

其次，折叠的正确代码是:

$( ".filter" ).collapsible( "collapse" );