jQuery切换是不允许

Question

我正在基于三个链接的菜单切换三个div。

它的工作很好，除了我想避免没有div显示。换句话说，应该总是显示一个div。现在，如果你点击一个菜单项两次，div完全消失。

的jsfiddle：http://jsfiddle.net/sf23103/raervcLj/5/

HTML：

<a id="menu1" class="menu" data-item="#directory_default">Default</a> | 
<a id="menu2" class="menu" data-item="#directory_alpha_first_name">First Name</a> | 
<a id="menu3" class="menu" data-item="#directory_alpha_last_name">Last Name</a> 

<div id="directory_default" style="">Default Content goes here.....</div> 
<div id="directory_alpha_first_name" style="display: none;">First Name content goes here....</div> 
<div id="directory_alpha_last_name" style="display: none;">last name content goes here....</div> 

JQUERY：

$(document).ready(function() { 
    $('.menu').click(function() { 
     var $clicked = $(this) 
     $('.menu').each(function(){ 
      var $menu = $(this); 
      if (!$menu.is($clicked)) 
      { 
       $($menu.attr('data-item')).hide(); 
      } 
     }); 
     $($clicked.attr('data-item')).toggle(); 
    }); 
}); 

Answer 1

当前，您隐藏了所有未点击的内容，然后切换点击的内容。所以如果被点击的那个已经显示，切换它将会隐藏它。

更换

if (!$menu.is($clicked)) 
{ 
    $($menu.attr('data-item')).hide(); 
} 

随着

$($menu.attr('data-item')).hide(); 

这样，您将隐藏一切，然后总是会切换只被点击的一个。

Answer 2

我会降低你的代码只是

$('.menu').click(function() { 
 
    $('[id^="directory_"]').hide() 
 
    $($(this).data('item')).show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="menu1" class="menu" data-item="#directory_default">Default</a> | 
 
<a id="menu2" class="menu" data-item="#directory_alpha_first_name">First Name</a> | 
 
<a id="menu3" class="menu" data-item="#directory_alpha_last_name">Last Name</a> 
 

 
<div id="directory_default" style="">Default Content goes here.....</div> 
 
<div id="directory_alpha_first_name" style="display: none;">First Name content goes here....</div> 
 
<div id="directory_alpha_last_name" style="display: none;">last name content goes here....</div>

点击一下，隐藏所有以directory_开头的div，然后根据data属性显示具有相应ID的ID。