Question

我的目标是让数据角色可折叠，点击标签链接后折叠。是否有解决方案或更好的方法来解决它？感谢。

这是我的小提琴，注意标签更改但折叠保持打开，我尝试使用点击功能，但它似乎没有做任何事情。

任何想法？

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>

SCRIPT

$(document).ready(function() {  

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

});

HEAD

<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" );

Jquery Mobile，如何在点击链接后折叠折叠？ Jfiddle

1 个答案: