Question

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

小提琴 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

[编辑]
作为替代方案，您可以使用此代码，它也更灵活，当您向菜单添加新项目时也是如此。它使用锚点的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

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

1 个答案: