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

我会将您的代码缩减为

$('.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的div。

Answer 2

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

替换

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

与

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

这样您将隐藏所有内容，然后始终只打开被单击的那个。

jQuery 切换不允许任何内容

jQuery Toggle is allowing no content

html

jquery

toggle