javascript - 如果通过单击其自己的链接打开特定的 div，则隐藏该 div

Question

我有 3 个打开的 div，工作正常。如果单击相应的链接，我需要能够关闭当前打开的 div，这样就不会打开任何 div。

fiddle http://jsfiddle.net/zangief007/gu5b3mk1/1/

html:

<ul>
   <li><a id="category" href="">Catergory</a></li>
        <li><a id="style" href="">styles</a></li>
        <li><a id="brand" href="">brand</a></li>
    </ul>


    <div id="one">This is my category</div>
    <div id="two">This is styles</div>
    <div id="three">This is main brands</div>

JS:

$("#category").click(function(e){
    e.preventDefault();
    $('div').hide();
  $("#one").fadeToggle();
});

$("#style").click(function(e){
    e.preventDefault();
     $('div').hide();
  $("#two").fadeToggle();
});
$("#brand").click(function(e){
    e.preventDefault();
     $('div').hide();
  $("#three").fadeToggle();
});

CSS:

#two, #three, #four{
    display:none;
}

Answer 1

将您的函数更改为:

$("#category").click(function(e){
    e.preventDefault();
    $('#two,#three').hide();
  $("#one").fadeToggle();
});

$("#style").click(function(e){
    e.preventDefault();
     $('#one,#three').hide();
  $("#two").fadeToggle();
});
$("#brand").click(function(e){
    e.preventDefault();
     $('#one,#two').hide();
  $("#three").fadeToggle();
});

Updated Fiddle .

[编辑]
作为替代方案，您可以使用此代码，它更灵活，当您向菜单添加新元素时也是如此。它使用 anchor 的 id 并显示相应的 div_id。

<ul id="list">
    <li><a id="category" href="">Catergory</a></li>
    <li><a id="style" href="">styles</a></li>
    <li><a id="brand" href="">brand</a></li>
</ul>
<div id="div_category">This is my category</div>
<div id="div_style">This is styles</div>
<div id="div_brand">This is main brands</div>

$("#list li a").click(function(e){
    e.preventDefault();
    var div = '#div_'+$(this).attr('id');
    $('div:not('+div+')').hide();
    $(div).fadeToggle();
});

Updated Fiddle 2 .