Выбранный класс на li a при переключении div не выключается

У меня есть сценарий JQuery, который позволяет включать и выключать серию div в зависимости от выбранного li в моем ul. Я добавил добавление / удаление SelectedClass, чтобы разрешить наведение курсора на открытый div, но класс не добавляется. Он добавлялся раньше, но не удалялся при нажатии / открытии другого div.

Кроме того, я бы хотел, чтобы div закрывался при нажатии во второй раз (если он уже открыт, он должен закрываться), но я не уверен, как это добавить ... Может кто-нибудь помочь?

Переключенный div не открывается в jsfiddle, но эта часть работает для меня вне jsfiddle ..

http://jsfiddle.net/deerebz/LWVsj/

$(document).ready(function() {
$(".artist-box").hide();
$("#artists ul li a li").removeClass('selected-artist');

$(".artist-logo").click(function(event) {
    event.preventDefault();
    $("#artists ul a li").removeClass('selected-artist');
  $(this).toggleClass('selected-artist');

    $('.artist-box').hide();

    var relatedDivID = $(this).attr('href');

    $(relatedDivID).slideToggle(); 
});

});


toggle jquery css addclass
person user3386414    schedule 18.04.2014    source источник
comment
var relatedDivID = $ (это) .attr ('идентификатор'); ???????   -  person Bhojendra Rauniyar    schedule 18.04.2014
comment
Не уверен, в чем именно заключается ваша проблема, но у вашей скрипки нет установленной / выбранной структуры (на левой боковой панели), вам нужно выбрать там какую-то версию jQuery. Это приводит к разнице между тем, что находится на вашей скрипке, и тем, что находится на вашем реальном сайте.   -  person King King    schedule 18.04.2014

Ответы (2)


arrow_upward
0
arrow_downward

Здесь показаны желаемые функции переключения: http://jsfiddle.net/q6NDn/1/

Вы не проверяли, что уже было выбрано, а просто пытались скрыть все при каждом щелчке. Проверяя уже выбранную вещь, вы можете фактически сдвинуть закрытый открытый div художника.

$(document).ready(function() {
    $(".artist-box").hide();
    $(".artist-logo").click(function(event) {
        event.preventDefault();
        // get the clicked element
        var clicked = $(this);
        // get the selected element
        var taggedWithSelect = $('.selected-artist');  
        // get the corresponding divs
        var clickPartner = $(clicked.attr('href'));
        var selectPartner = $(taggedWithSelect.attr('href'));
        // we either want to close this one or open this one and close any others
        // if this one is open, it should be tagged with select
        if( clicked.hasClass('selected-artist') ) {
            clicked.removeClass('selected-artist');
        } else {
            clicked.addClass('selected-artist');
            taggedWithSelect.removeClass('selected-artist');
            selectPartner.slideToggle();
        }
        clickPartner.slideToggle();
    });
});
person BenjaminGolder    schedule 18.04.2014
comment
Я замечаю, что когда я нажимаю на li, запускающий переключатель, и удерживаю его, li расширяется на 100% ширины экрана, центрируя изображение, которое у меня есть, пока я не отпущу мышь. Есть идеи, почему? - person user3386414; 23.04.2014
comment
@ user3386414 это из-за CSS. Я удалил в вашем CSS строку, изменяющую ширину .selected-artist, и он перестал это делать: jsfiddle.net/q6NDn/ 2 Если ваша проблема решена, вы примете один из ответов? - person BenjaminGolder; 23.04.2014

arrow_upward
0
arrow_downward

По сути, вы пытаетесь сделать много с помощью небольшого количества кода. Вам нужно будет расширить его, чтобы сделать его более гибким. Замечательно, что вы пытаетесь использовать как можно меньше jQuery, но попробуйте.

http://jsfiddle.net/LWVsj/1/

Мне пришлось избавиться от вашего CSS для .selected-artist. В эту секунду я не совсем уверен, почему он что-то испортил, но когда я нажимал на него, это немного подпрыгивало.

$(document).ready(function() {
$(".artist-box").hide();
$("#artists ul li a li").removeClass('selected-artist');

$(".artist-logo").click(function(event) {  
    var relatedDivID = $(this).attr('href');
    $('.artist-box').hide();
    if(jQuery(this).hasClass('selected-artist')){
        $(".artist-logo").removeClass('selected-artist');
        return;
    }else{
      $(".artist-logo").removeClass('selected-artist');
      $(this).toggleClass('selected-artist');
    }



    $(relatedDivID).slideToggle(); 
});
});

РЕДАКТИРОВАТЬ: Есть способы, которыми я мог бы изменить это, чтобы сделать его лучше, но я хотел использовать большую часть того же кода, который вы уже использовали. Я предполагаю, что вы хотели использовать это по какой-то причине.

person Cayce K    schedule 18.04.2014