Question

所以我有这个开关功能，我正在努力。但由于某种原因，单击菜单选项后菜单就会消失。到目前为止唯一的解决方案是我封装了内容＆＃34;在一个新的div。工作和非工作版本的jsfiddle：https://jsfiddle.net/yf62w1bp/1

Jquery：

$(document).ready(function(){
  $("a.menu2").click(function() {
        var clicked = $(this).attr('title');
        $("#"+clicked).show().siblings().hide();
    });
});

非工作HTML：

<div id="menu2">
    <a href="#" title="content_1" class="menu2">menu test1</a>
    <a href="#" title="content_2" class="menu2">menu test2</a>
</div>
<div id="content_1"><p>content test1</p></div>
<div id="content_2"><p>content test2</p></div>

使用HTML：

<div id="menu2">
    <a href="#" title="content_1" class="menu2">menu test1</a>
    <a href="#" title="content_2" class="menu2">menu test2</a>
</div>
<div>
    <div id="content_1"><p>content test1</p></div>
    <div id="content_2"><p>content test2</p></div>
</div>

解释为什么会这样？

我如何修改我的JS以使其适用于JSFiddle中的first解决方案？

Answer 1

您使用$.siblings()隐藏了菜单，因为#menu2是#content_1和#content_2的兄弟。通过将#content_1和#content_2嵌套在他们自己的元素中，他们只是彼此的兄弟姐妹，所以一切都按预期工作。

如果要保留#menu2是#content_1和#content_2的兄弟的结构，请使用其他方法对要隐藏的元素进行分组。在这里，我给了所有可切换的div一类.toggle并隐藏了那些，然后显示与你点击的标题匹配的那个。

＆＃13;

$(document).ready(function() {
  $("a.menu2").click(function() {
    var clicked = '#' + $(this).attr('title');
    $('.toggle:not('+clicked+')').hide(1000);
    $(clicked).show(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu2">
  <a href="#" title="content_1" class="menu2">menu test1</a>
  <a href="#" title="content_2" class="menu2">menu test2</a>
</div>
<div id="content_1" class="toggle">
  <p>content test1</p>
</div>
<div id="content_2" class="toggle">
  <p>content test2</p>
</div>

＆＃13;

或者，您仍然可以使用$.siblings()并仅使用:not()来排除#menu2作为兄弟添加到对象中。但是如果你这样做，如果你以后引入任何其他兄弟姐妹，你不想以同样的方式隐藏，你需要将这些元素添加到选择器列表。

＆＃13;

$(document).ready(function() {
  $("a.menu2").click(function() {
    var clicked = '#' + $(this).attr('title');
    $(clicked).show(1000).siblings(':not(#menu2)').hide(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu2">
  <a href="#" title="content_1" class="menu2">menu test1</a>
  <a href="#" title="content_2" class="menu2">menu test2</a>
</div>
<div id="content_1">
  <p>content test1</p>
</div>
<div id="content_2">
  <p>content test2</p>
</div>

＆＃13;

显示内容并隐藏所有其他相关对象

1 个答案: