0

对不起，如果标题听起来含糊不清，但我真的不知道如何措辞这个。

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

我已经设法做到了，而且效果非常好，但是只有当我单击相同的菜单项来关闭它时，div 才会关闭。

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

我可以将它们设置为一个组，以便如果我单击一个新菜单项，它会关闭任何当前打开的 div？

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

我已经放在这里了...

http://jsfiddle.net/AFpYc/

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

7 回答 7

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');
});
于 2013-02-27T15:39:38.730 回答
0

你可以试试

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

演示：小提琴

于 2013-02-27T15:35:10.123 回答
0

也许是这样的？

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

示范

于 2013-02-27T15:37:51.673 回答
0

您可以使用.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/找到代码示例

于 2013-02-27T15:40:16.167 回答
0

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

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();
    }
});
于 2013-02-27T15:45:43.127 回答
0

使用 .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/

于 2013-02-28T08:51:33.433 回答
0

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

$(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;}
于 2016-03-30T20:14:36.180 回答