Question

很抱歉，如果标题听起来很模糊，但我真的不知道如何说出这个。

我有一个包含6个项目的菜单。我想指定每个菜单项在菜单上方的某个位置打开它自己对应的div块。

我已经设法做到这一点，并且它的效果非常好，但是如果我点击相同的菜单项来关闭它，div只会关闭。

如果我尝试打开一个div，然后点击另一个菜单项，旧的菜单项将保持打开状态，新的菜单项将打开。

我可以将它们设置为一个组，这样如果我点击一个新的菜单项，它会关闭所有当前打开的div吗？

我在过去20分钟内一直试图粘贴我的代码，但是这个编辑器并不接受所有这些代码，而且它绝对不是错误的。

我把它放在这里......

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $($(this).attr('href')).toggle('fade');
});

Answer 1

问题来自切换...切换是一个开/关切换。这意味着它打开封闭的东西并关闭打开的东西。

我建议您更改.show()和.hide()的切换...这样您就可以轻松地执行您想要的操作，如果点击需要打开div，则.show()是更适合。然后，您可以在打开之前决定.hide()所有其他div。我做了小提琴工作。

http://jsfiddle.net/AFpYc/2/

请注意我是如何获得我们想要关闭的所有div，但是我们将打开它并打开它。

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $('#popup_canvas').children('div').not($(this).attr('href')).hide();
    $($(this).attr('href')).show('fade');
});

Answer 2

你可以尝试

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $($(this).attr('href')).toggle('fade');
    $($(this).attr('href')).siblings().fadeOut()
});

演示：Fiddle

Answer 3

也许是这样的？

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $('.divs').fadeOut('slow');
    $($(this).attr('href')+':hidden').fadeIn('slow');    
});

Demonstration

Answer 4

您可以使用.siblings()。 .siblings()方法允许我们在DOM树中搜索这些元素的兄弟，并从匹配元素构造一个新的jQuery对象。

的CSS

.activeClass
{
    color:RED;
}

的JavaScript

$(document).ready(function()
{
    $('.divs').hide();
    $('.links').click(function(event){
        event.preventDefault();
        var targetDiv = $($(this).attr('href'));

        $('.links').removeClass("activeClass");
        if(targetDiv.css("display") == "none")
        {
            $(this).addClass("activeClass");
        }

        targetDiv.siblings().hide(); 
        // hide those elements immediately, you would change to fadeOut if you like
        targetDiv.toggle('fade');
    });

    $(document).click(function(e)
    {
        if($(e.target).hasClass("links") || $("#popup_canvas").find(e.target).length > 0)
        {
            // exclude the links and div that pops
        }
        else
        {
            $('.divs').hide();
            $('.links').removeClass("activeClass");
        }
    });
})

已更新，请在jsfiddle http://jsfiddle.net/AFpYc/8/

中找到代码示例

Answer 5

这是一个更复杂的版本......活动元素跟踪使用css类活动，并且任何活动元素在新文件被淡入之前淡出。

http://jsfiddle.net/TrRD9/

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();

    var $href = $($(this).attr('href')); // get target element

    if($href.is('.active')) // if its already active, ignore it
        return;

    // get any active sibling elements
    var $activeSiblings = $href.siblings('.active');
    if($activeSiblings.length > 0)
    {
        // fade out active siblings first
        $activeSiblings.removeClass('active').fadeOut(function(){
            $href.addClass('active').fadeIn();
        });
    } else {
        //  no siblings are active
        $href.addClass('active').fadeIn();
    }
});

Answer 6

使用.not过滤当前项目中的所有项目

var $alldivs = $('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    var href = $(this).attr('href');
    var $current = $(href);
    $current.show(500);
    $alldivs.not($current).hide(500);
});

http://jsfiddle.net/AFpYc/6/

Answer 7

如果您实际显示和隐藏菜单（而不是添加和删除类），这是一个非常简单但有效的版本。我使用＆＃34;不是（thismenu）＆＃34;确保在单击新菜单时仅隐藏其他菜单。

$(document).ready(function() {

<!--**************************************************************************************-->
<!--*** Bind menubar items
<!--**************************************************************************************-->

  $(".menubaritem").click(function(e){
    var thismenu = $(this).find('.menubaroptions');
    $('.menubaroptions').not(thismenu).slideUp("fast"); // hiding all other menus
    thismenu.slideDown("fast");
    e.stopPropagation();
  });

<!--**************************************************************************************-->
<!--*** Bind menubar menu options (to hide current menu when option is clicked)
<!--**************************************************************************************-->

  $(".menubaroption").click(function(e){
    $(this).closest(".menubaroptions").slideUp("fast");
    e.stopPropagation();
  });

<!--**************************************************************************************-->
<!--*** Bind slideup to all menus on body click
<!--**************************************************************************************-->

  $("body").click(function (e) { // binding onclick to body
    $(".menubaroptions").slideUp("fast"); // hiding all menus
    e.stopPropagation();
  });

});

对于每个菜单栏项，HTML看起来都是这样的：

  <td class='menubaritem clickable'>Menu Item<div class=menubararrow></div>
    <div style='position:absolute;right:1px'>
      <div class=menubaroptions>
        include("menu-blah.php");
      </div>
    </div>
  </td>

只是为了完成，这里是css

.menubaritem{height:26px;color:white;font-weight:normal;padding:2px 20px 2px 10px;white-space:nowrap;text-align:right;position:relative}
.menubaritem:hover{background-color:#404040;color:yellow}
.menubararrow{position:absolute;display:inline;margin-left:10px;float:right;margin-top:4px;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid ".$primarytextcolour.}
.menubaritem:hover div.menubararrow{border-top: 5px solid white;}

.menubaroptions{border:1px solid white;display:none;position:relative;top:4px;background-color:rgba(0,0,0,0.80);color:white;min-width: 160px;box-shadow: 2px 2px 8px #888888;border-radius:4px;z-index:100}
.menubaroptions td{background-color:transparent;color: white;padding: 4px 10px;border:none;border-top:1px solid transparent;border-bottom:1px solid transparent}
.menubaroptions td.menubaroption:hover{background-color:grey;color:white;opacity:1;border-top:1px solid transparent;border-bottom:1px solid transparent}
.clickable{cursor:hand;cursor:pointer;pointer:hand;}

jQuery切换多个菜单项（关闭任何打开并打开一个新的）

7 个答案: