Question

我有三个菜单及其各自的内容。现在问题是当我从＆＃34;菜单一切换到＃34;到＆＃34;菜单二＆＃34;你会注意到＆＃34;菜单一＆＃34;内容div保持开放。请指导我如何一次只打开一个内容div？此外，只有当内容打开时，菜单才需要处于活动状态。

Fiddle Example

HTML：

<span class="link1">Menu One</span>
<span class="link2">Menu Two</span>
<span class="link3">Menu Three</span>

<div id="div1">Menu One</div>
<div id="div2">Menu Two</div>
<div id="div3">Menu Three</div>

JS：

$(document).ready(function () {
$(".link1").on('click', function (event)  {
    $(this).toggleClass('active');
    $("#div1").slideToggle()("fast")
});
$(".link2").on('click', function (event)  {
    $(this).toggleClass('active');
    $("#div2").slideToggle()("fast")
});
$(".link3").on('click', function (event)  {
    $(this).toggleClass('active');
    $("#div3").slideToggle()("fast")
});
});

Answer 1

可能的解决方案：

<强> HTML ：

<span class="link" name="menu1">Menu One</span>
<span class="link" name="menu2">Menu Two</span>
<span class="link" name="menu3">Menu Three</span>

<div class="submenu" name="menu1">Menu One</div>
<div class="submenu" name="menu2">Menu Two</div>
<div class="submenu" name="menu3">Menu Three</div>

<强> CSS ：

span{display:inline-block; padding:10px; cursor:pointer;}
.active{color:#fff; background:red;}
div{display:none; background:red; height:80px; color:#fff; text-align:center; line-height:80px; font-size:20px;}

<强>的jQuery ：

$(".link").on('click', function (event)  {
    Toggle($(this));
});

function Toggle(obj){
    var submenu = $(".submenu[name="+obj.attr('name')+"]");
    $(".submenu").not(submenu).hide();
    $(".link").not(obj).removeClass('active');
    submenu.slideToggle("fast");
    obj.toggleClass('active');
}

点击此链接jsfiddle，了解其工作原理。

希望它有用！

Answer 2

$(document).ready(function () {
    $(".link1").on('click', function (event)  {
        $(".link2").removeClass("active");$("#div2").hide();
        $(".link3").removeClass("active");$("#div3").hide();
        $(this).toggleClass('active');
        $("#div1").slideToggle()("fast")
    });
    $(".link2").on('click', function (event)  {
        $(".link1").removeClass("active");$("#div1").hide();
        $(".link3").removeClass("active");$("#div3").hide();
        $(this).toggleClass('active');
        $("#div2").slideToggle()("fast");
    });
    $(".link3").on('click', function (event)  {
        $(".link1").removeClass("active");$("#div1").hide();
        $(".link2").removeClass("active");$("#div2").hide();
        $(this).toggleClass('active');
        $("#div3").slideToggle()("fast")
    });
});

Answer 3

这是另一种方式......

这是我的JSFiddle

http://jsfiddle.net/jubsr5hd/3/

这是我的CSS

span{display:inline-block; padding:10px; cursor:pointer;}
.active{color:#fff; background:red;}
div{display:none; background:red; height:80px; color:#fff; text-align:center; line-height:80px; font-size:20px;}

这是我的HTML

<span class="link1" target="div1">Menu One</span>
<span class="link2" target="div2">Menu Two</span>
<span class="link3" target="div3">Menu Three</span>

<div id="div1">Menu One</div>
<div id="div2">Menu Two</div>
<div id="div3">Menu Three</div>

这是我的JQuery

$(document).ready(function () {
    $('[class*="link"]').on('click', function (event)  {
        var myTarget = $(this).attr("target");
        hideRemove();
        $(this).toggleClass('active');
        $('[id="'+myTarget+'"]').slideToggle()("fast");
    });

    function hideRemove() {
        $('[class*="link"]').removeClass('active');
        $('[id*="div"]').removeAttr('style');
    }

});

显示/隐藏具有活动链接问题的div

3 个答案: