jQuery slideToggle разрыв, когда вы нажимаете ссылку внутри div

Question

jQuery slideToggle разрыв, когда вы нажимаете ссылку внутри div

0

У меня есть небольшая проблема с слайдом, когда у меня есть ссылка внутри панели слайдов. То, что я пытаюсь сделать, это иметь возможность нажимать кнопку, и div будет скользить вверх и отображать связанные сообщения, и как только вы нажмете другую или соответствующую кнопку проекта на странице, она закроет переключатель и покажет другой эффект, который я использую (100% ширина и всплывающее окно). Сценарий, который я использую, работает отлично, но я столкнулся с одной проблемой. Когда я нажимаю связанный столб внутри слайда, он заставляет 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);
    }
     });
     })

Если я изменяю.projectHolder-small, # projectSpecs в.not-функции, чтобы просто читать #menu, тогда я могу щелкнуть ссылку внутри панели, но панель не будет сдвигаться, когда я нажимаю другую кнопку на странице. Всплывающее окно из спецификаций #project просто перейдет через панель, а не закрывает ее.

Есть ли что-то в моем скрипте?

спасибо

bigant841 01 дек. 2013, в 01:42

Источник

Теги:

javascript

jquery

html

css

2 ответа

0

Попробуйте изменить $(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' элементам '.projectHolder-small,#projectSpecs' панель не будет закрыта.

Mark S 01 дек. 2013, в 02:26

0

Посмотреть это работает здесь: jsfiddle.net/K8vBg/17/
Mark S 01 дек. 2013, в 05:26
0

спасибо за сообщение @marks, я понял это вчера, но не смог опубликовать его до сегодняшнего дня.
bigant841 01 дек. 2013, в 15:10

Ещё вопросы

Посмотреть это работает здесь: jsfiddle.net/K8vBg/17/
спасибо за сообщение @marks, я понял это вчера, но не смог опубликовать его до сегодняшнего дня.

bigant841 · Accepted Answer · 2013-12-01T12-57-00.000Z

Я переписал сценарий к следующему, и он отлично работает

$(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();
});
});