Question

当我在幻灯片面板中有链接时，我在使用slideToggle时遇到了一些麻烦。我想要做的是能够按下按钮，div将向上滑动并显示相关的帖子，一旦你按下另一个或页面上的相关项目按钮，它将关闭切换并显示我正在使用的另一个效果（100％宽度和高度弹出）。我使用的脚本工作完美，但我遇到了一个问题。当我单击slideToggle内部的相关帖子时，它会导致div向下滑动，而不是转到代表链接的页面。

以下是我的代码和示例http://jsfiddle.net/K8vBg/15/。

$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
    event.preventDefault();
    event.stopPropagation();
    // if the menu is visible slide it up
    if (menu.is(":visible"))
    {
        menu.slideUp(1000);
    }
    // otherwise, slide the menu down
    else
    {
        menu.slideDown(400);
    }
});     

$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
    event.preventDefault();
    if (menu.is(":visible"))
    {
        menu.slideUp(400);
    }
     });
     })

如果我在.not函数中更改.projectHolder-small，＃projectSpecs以便只读取#menu，那么我可以单击面板内部的链接，但是当我单击页面上的另一个按钮时面板将不会滑动。 #project规范中的弹出窗口将覆盖面板，而不是关闭它。

我的脚本中是否缺少某些内容？

谢谢

Answer 1

尝试将$(document).not().click()更改为：

$(document).click(function(event){
    if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
        if (menu.is(":visible")){
            menu.slideUp(400);
        }            
    }
});

我使用closest()代替通常的is()，因此即使点击'.projectHolder-small,#projectSpecs'面板的子元素也不会关闭。

Answer 2

我将脚本重写为以下内容并且它完美无缺

$(document).ready(function () {

var $frm = $('#menu').hide();

var $bts = $("#menu-trigger").on('click', function () {
    var $this = $(this)
    $bts.filter(".selected").not(this).removeClass('selected');
    $this.toggleClass('selected');

    if ($this.hasClass('selected') && $frm.is(':visible')) {
        $frm.stop(true, true).slideUp(function () {
            $(this).slideDown()
        });
    } else {
        $frm.stop(true, true).slideToggle();
    }
});
$bts.filter('.selected').click();

$("#projectSpecs, #menuButton").click(function () {
    $bts.filter(".selected").removeClass('selected');
    $frm.slideUp();
});
});

按下div中的链接时jQuery slideToggle中断

2 个答案: