JQuery - показать / скрыть не работает

Итак, я сделал скрипт show/hide, который открывает и закрывает элемент, по которому щелкают. Но теперь я не могу заставить его работать как-то, и я не могу понять, почему.

Может кто-нибудь попытаться взглянуть на это?

HTML

<div id="fleresvar" class="fleresvar">  <u><b>Klik her for at se flere svar</b></u>

    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
</div

JavaScript

$("#fleresvar").click(function () {
    var $element = $(this);
    if ($(this).hasClass('open')) {
        $element.removeClass("open");
        $element.children(".txtmore").hide(500);
    } else {
        $(".open").removeClass("open");
        $('.txtmore').hide(500);

        $element.toggleClass('open');
        $element.children('.txtmore').toggle(500);
    }

});

jsFiddle

Источник

4 ответа

Решение

Проверьте эту СКРИПКУ

$(document).ready(function(){
    $(".fleresvar").on('click','.handler',function () {
        var $element = $(this).closest('.fleresvar');
        if ($element.hasClass('open')) 
        {
            $element.removeClass("open");
            $element.find(".txtmore").hide(500);
        } 
        else 
        {
            $(".open").removeClass("open");
            $('.txtmore').hide(500);    
            $element.addClass('open');
            $element.find('.txtmore').show(500);
        }    
    });
});

HTML

<div id="fleresvar" class="fleresvar">  
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>

<div id="fleresvar2" class="fleresvar"> 
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>
Источник

Похоже, ваш код работает, но внутри элементов txtask* div нет содержимого, поэтому ничего не отображается. Если вы добавите что-то в них, вы увидите переключение в действии. Однако у меня есть несколько предложений:

<u> а также <b> теги устарели в HTML4, а затем возвращены в HTML5 для использования с семантическим значением. Другими словами, эти теги следует использовать только в том случае, если они добавляют значение (например, если вы подчеркиваете слово с ошибкой). Вы должны использовать CSS text-decoration: underline; а также font-weight: bold; добиться того же эффекта. Смотрите здесь для получения дополнительной информации: http://html5doctor.com/u-element/

Эта строка: $element.children(".txtmore").hide(500); можно упростить до: $('#txtmore').hide(500);

Это делает две вещи: вам больше не нужно использовать функцию дочерних элементов, так что меньше обработки. Кроме того, выбор по идентификатору в jQuery намного быстрее, чем выбор по классу. Это не будет иметь значения для 5 элементов, но будет, когда вы войдете в более сложные проекты. Если нужный вам элемент уникален (т. Е. Есть только один на всей странице), используйте идентификатор.

Похоже, вы хотите переключить класс.open в главном #fleresvar div; если это единственное место, то эти две строки противоречат друг другу:$(".open").removeClass("open");$element.toggleClass('open');

Первая строка удалит.open из всех элементов с.open, затем вторая добавит.open к #fleresvar. Если вы хотите только добавить / удалить его из основного элемента, то либо выполните $element.addClass('open') а также $element.removeClass('open'), ИЛИ ЖЕ $element.toggleClass('open') дважды. Мне лично нравится использовать addClass и removeClass, так что я точно знаю, что класс был добавлен / удален.

Для элементов txtask* div: вместо того, чтобы помещать одинаковые встроенные стили в каждый из них, добавьте к ним общий класс, а затем переместите стили в свой файл CSS.

Вот jsFiddle с моими рекомендуемыми изменениями: http://jsfiddle.net/2Saph/9/

HTML:

<div id="fleresvar" class="fleresvar">Klik her for at se flere svar
    <div id="txtmore" class="txtmore">
        <div id="txtask1" class='txtask'>a</div>
        <div id="txtask2" class='txtask'>b</div>
        <div id="txtask3" class='txtask'>c</div>
        <div id="txtask4" class='txtask'>d</div>
        <div id="txtask5" class='txtask'>e</div>
    </div>
</div>

JS:

$("#fleresvar").on('click', function (evt) {
    evt.preventDefault();
    var $element = $(this);
    if ($element.hasClass('open')) {
        $element.removeClass("open");
        $('#txtmore').hide(500);
    } else {
        $element.addClass("open");
        $('#txtmore').show(500);
    }
});

CSS:

#fleresvar {
    cursor:pointer;
    background-position: 0 4px;
    min-height: 15px;
    border: 0 solid #000000;
    margin: 2px 0 5px 0;
    padding: 0 0 0 15px;
    background-image:url('/images/images/Pil_normal.png');
    background-repeat: no-repeat;
    font-weight: bold;
    text-decoration: underline;
}
#fleresvar.open {
    background-image: url('/images/images/Pil_open.png');
}
#txtmore {
    display: none;
    width: 280px;
    min-height:15px;
    border: 0 solid #000000;
    margin: 0;
}
div.txtask {
    text-decoration:underline;
    color:#8F8F8F;
    cursor:pointer;
}
Источник

Проверьте эту скрипку:

$("#fleresvar").click(function () {
    var $element = $(this);
    if ($(this).hasClass('open')) {
        $element.removeClass("open");
        $element.children(".txtmore").hide(500);
    } else {
        $(".open").removeClass("open");        

        $element.toggleClass('open');
        $element.children('.txtmore').show(500);
        $('.txtmore').show(500);
    }

});
Источник

Показать / скрыть скрипт

    var toggle = 0;

$("#fleresvar").click(function (e) {
if (toggle == 0) {
            $('.txtmore').stop(true,true).show('500');
            toggle = 1;
        } else if (toggle == 1) {
            $('.txtmore').stop(true,true).hide('500');
            toggle = 0;
        }
        e.stopPropagation();
        return false;

});

и пример

демонстрация

Источник
Другие вопросы по тегам