Question

我有以下代码：

<script>
    $(document).ready(function() {
        $('.toggle_section').click(function(e){
            parent = $(e.target).closest("div")
            objChild = parent.children('div');
            $('.sectionContentId').hide(400);
            $(objChild).toggle(400);
        });
    });

</script>

<br />
<div class="box" id="parent_section_1">
    <strong>
        <a class="toggle_section" href="javascript:;">New Section 1</a>
    </strong>
    <div class="sectionContentId" id="section_1" style="display: none">
        <br />
        Contents<br />for<br />section<br />1
    </div>
</div>

<br />

<div class="box" id="parent_section_2">
    <strong>
        <a class="toggle_section" href="javascript:;">New Section 2</a>
    </strong>

    <div class="sectionContentId" id="section_2" style="display: none">
        <br />
        Contents<br />for<br />section<br />2
    </div>
</div>

可以看到here

的例子

正如您所看到的，我想要完成的是当您点击其中一个链接时，所有其他“已展开的部分”都会崩溃，并且点击的部分会展开。

这样可以正常工作，但显然可以使用逻辑：

$('.sectionContentId').hide(400);
$(objChild).toggle(400);

当我单击其中一个展开的部分尝试关闭它时，它会短暂关闭并再次打开。

我想保持相同的功能，但是想通过点击一个链接打开和关闭一个部分，以及当我打开一个部分时，我打算在打开这个新部分之前关闭所有部分

我不确定我在这里很清楚，但通过查看这个例子，你将能够更好地理解我的意思。

事先提前

Answer 1

DEMO： http://jsbin.com/uguto3/3/edit

只需将toggle类添加到强标记

，就可以用更少的代码完成

<strong class="toggle_section">

像这样

  $('.toggle_section').click(function() {
     $('.sectionContentId').slideUp(400);
    if($(this).next().is(':hidden')) 
      $(this).next().slideDown(400);            
   });

Answer 2

如果问题是元素隐藏然后立即显示，你可以将它从为hide隐藏的元素中删除...在本例中所有元素都带有class =“sectionContentId”，除非id =“elemid ” ...

$('.sectionContentId:not(#elemid)').hide(400);

Answer 3

试试这个：

$("a.toggle_section").click(function() {
  var sections = $("div.box > div");
  var current = $(this).closest("div.box").children("div");
  sections.not(current).stop().hide(400, function() {
    current.toggle(400);
  });
  return false;
});

如果我理解正确，这应该做你想要的，这是：

当您点击相关链接时，隐藏其他链接的所有部分。在它们被隐藏之后，当前的一个被切换。

我不确定这将是一次如此出色的用户体验。如果他们都已经隐藏了怎么办？你还想要延迟吗？当然，您可以为此案例编码。此外，您确定要切换部分而不是简单地显示它吗？

编辑：显示您点击的内容并同时隐藏其余内容：

$("a.toggle_section").click(function() {
  var sections = $("div.box > div");
  var current = $(this).closest("div.box").children("div");
  sections.not(current).stop().hide(400);
  current.show(400);
  return false;
});

Answer 4

您可以尝试我自己制作的插件，修改它或其他=＆gt; How to make nested vertical menu with jQuery accordion?

快速帮助一些jQuery切换

4 个答案: