Использование jQuery slideToggle, когда включен javascript вместо css display: block

Question

Использование jQuery slideToggle, когда включен javascript вместо css display: block

0

Я хочу, чтобы div с флажками отображался, когда мышь зависала над кнопкой. Я хочу, чтобы jQuery код выполнялся, если javascript включен в браузере. Я написал код CSS для hover если работает javascript. Но код CSS всегда переопределяет код jQuery. Как достичь того, чего я хочу.

Код html выглядит следующим образом

<div id="button_div">
    <button id="hover_button" type="button">Select Options</button>
    <div id="checkbox_div">
        <form>
            <input id="one" type="checkbox" value="one" />
            <label for="one">One</label>
            <br />
            <input id="two" type="checkbox" value="two" />
            <label for="two">Two</label>
            <br />
            <input id="three" type="checkbox" value="three" />
            <label for="three">Three</label>
            <br />
            <input id="four" type="checkbox" value="four" />
            <label for="four">Four</label>
            <br />
        </form>
    </div>
</div>

CSS - это

#button_div {
    width: 120px;
}
#hover_button {
    width: 120px;
}
#checkbox_div {
    display: none;
    position: relative;
    top: -26px;
    font-family: Verdana, sans-serif;
    background-color: #EEEEEE;
    width: 200px;
}
#button_div:hover>#checkbox_div {
    display: block;
}

Код jQuery - это

$(document).ready(function () {
    $("#button_div").hover(function () {
        $("#checkbox_div").slideDown("slow");
    });
});

Это ссылка на скрипку: http://jsfiddle.net/LdzPE/

jyotesh 08 апр. 2014, в 19:07

Источник

2

Вы должны были бы заглянуть в класс .no-js .
Paulie_D 08 апр. 2014, в 16:12

Теги:

jquery

html

css

2 ответа

1

То, что говорили другие, верно.

По существу вам нужно привязать класс к элементу, который применяет к нему эффекты зависания, например no-js, и удалять его при загрузке JavaScript, если это так.

Простые изменения действительно.

HTML

<div id="button_div" class="no-js">

JavaScript

$(document).ready(function () {
    var $btnDiv = $("#button_div");

    $btnDiv.removeClass('no-js');
    $btnDiv.not('.no-js').hover(function () {
        $("#checkbox_div").slideDown("fast");
    });
});

CSS

#button_div.no-js:hover>#checkbox_div {
    display: block;
}

Вот скрипка.

trentmwillis 08 апр. 2014, в 14:58

Ещё вопросы

Вы должны были бы заглянуть в класс .no-js .

j08691 · Accepted Answer · 2014-04-08T14-41-00.000Z

Один из способов - добавить класс к элементу button_div, например jscheck. Затем в вашем CSS измените правило для таргетинга на этот новый класс.

Поэтому измените #button_div:hover>#checkbox_div на #button_div.jscheck:hover>#checkbox_div.

Наконец, в вашем jQuery удалите класс. Таким образом, если JavaScript включен, класс будет удален, и CSS не будет применяться. Однако, если JavaScript недоступен, класс остается и CSS работает.

Пример jsFiddle