Question

我正在使用几个WordPress循环和jQuery UI标签，这些标签会导致下面的主标签和条目内容div标记。 WordPress循环在每个tab div中生成“entry-post”标记，但我没有显示php，因为每个tab div中生成的html标记是重要的部分。

我也使用一些jQuery来独立扩展/折叠每个条目内容div：

$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });

我发现每个条目内容div在切换标签时保持扩展状态，即如果某些条目内容div在tabone中展开，我切换到tabtwo然后再切换到tabone，它们仍然在tabone中扩展。

我需要做的是在更改选项卡时折叠选项卡中的所有条目内容div。下面是tab init以及用于更改选项卡的fx。

当更改标签时，我需要添加到此功能以折叠所有条目内容div？

$(document).ready(function(){ 
var $tabs= $("#tabs").tabs(); 
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});

主要标签和条目内容div标记：

<div id="tabs">
    <ul>
    <li><a href="#tabone">tabone</a></li>
    <li><a href="#tabtwo">tabtwo</a></li>
    <li><a href="#tabthree">tabthree</a></li>
    </ul>

    <div id="tabone">

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>
    </div>

    <div id="tabtwo">

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>
    </div>

    <div id="tabthree">

....

</div></div>

Answer 1

以下代码应在选择新标签时折叠所有.entry-content div：

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
        }
    }); 
});

Answer 2

$("div.post [name^="entry-title"]").hide();

应该在你的fx旁边附上你想要的东西。

或：

$("#tabs a").click(function () {
  $("div.post [name^="entry-title"]").hide();
});

Answer 3

我不确定我完全理解你的问题。但是如果你不想检查选项卡是否被触发，请尝试使用：

$( ".selector" ).tabs({
  show: function(event, ui) { ... }
});

在显示标签时，简化了如何使用“entry-post”类折叠所有div：

$(document).ready(function(){ 
  var $tabs = $("#tabs").tabs({
    show: function(){
      $('.entry-post').hide();
    }
  });
});

Answer 4

我不是jQuery专家，所以这里是直接的javascript。可能至少有助于解决问题...
由于你不关心div是什么标签（因为当更改标签时应该隐藏所有div），每次更改标签时都可以隐藏页面上的所有div，无论它在哪个标签上。

var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
  divitem.style.display = "none";
}

我希望我的jQuery更强大，所以我可以放弃它，但它可能有帮助...

编辑：只是看看你的示例代码，我想在jQuery中就是这样的东西：

$("#tabs a").click(function() { $(".entry-content").hide(); });

单击任何选项卡时关闭所有条目内容类div的内容。

Answer 5

您可能希望使用现有的jquery UI选项卡库，这将解决您的许多问题。

http://jqueryui.com/demos/tabs/

使用此功能可以让您在列表项和它们控制的div之间建立更好的关联。在标题中添加引用

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

或下载并删除您不需要的内容。将以下内容添加到CSS

.ui-tabs .ui-tabs-hide {
  display: none !important;
}

并更改您的引用，以便它们符合jqueryUI规范

<div id="tabs">
<ul>
    <li><a href="#tabs-1">tabone</a></li>

然后匹配的div ID

  <div id="tabs-1">
    <div class="entry-post">

这应该成为关联。然后，您可以添加控制行为，以便它应该读取

$(document).ready(function(){

    $(function() {
            $('#tabs').tabs();
        });

这将消除存储div数组的需要

然后你可以将一个函数绑定到tabselect事件，该事件将隐藏你想要折叠的div

$('#tabs').bind('tabsselect', function(event, ui) {
            $('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
        });

然后你的代码应该是：

<head>
<title>Collapse Divs</title>
<style type="text/css">

    .ui-tabs .ui-tabs-hide {
        display: none !important;
    }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(function() {
            $('#tabs').tabs();
        });

        $('#tabs').bind('tabsselect', function(event, ui) {
            $('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
        });

        $(".entry-content").hide();

        $(".entry-title").click(function() {
            $(this).parent().children(".entry-content").slideToggle(500); 
            });

});
 </script>
</head>
<body>
    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">tabone</a></li>
    <li><a href="#tabs-2">tabtwo</a></li>
    <li><a href="#tabs-3">tabthree</a></li>
    </ul>

<div id="tabs-1">
    <div class="entry-post">
...
    <h1 class="entry-title">Title 3.3</h1>
        <div class="entry-content">Lorem ipsum...</div>
    </div>
</div>

</body>

如何通过更改jQuery Tabs UI中的选项卡来折叠所有div？

5 个答案: