JQuery переключатель не переключается - PullRequest
Новая
       19

JQuery переключатель не переключается

1 голос
/ 30 июня 2011

У меня есть страница с кучей поддельных выпадающих меню, которые закодированы следующим образом (я не могу изменить HTML): 

<div class="select">
    <div class="wrapper calcdropdown">
        <a href="#" class="dd-openercalc">Select a calculator</a>
        <a href="#" class="dd-opener pulldown-arrow">&nbsp;</a>
    </div>
    <ul class="selectbox">
        <li>Dropdown item 1</li>
        <li>Dropdown item 2</li>
        <li>Dropdown item 3</li>
    <ul>
</div>

Когда я нажимаю на любую из ссылок внутри раскрывающегося менюDIVs Мне нужно переключить соответствующий селектор UL.Когда я использую toggle (), UL selectbox появляется, когда я впервые нажимаю на ссылки, но не исчезает, когда я нажимаю на ссылки снова. 

var $j = jQuery.noConflict();
$j(document).ready(function() {
    // hide all the dropdowns by default
    $j(".selectbox").hide();

    $j('.calcdropdown a').live('click',function(e) {
        // hide the dropdowns in case another one's open
        $j(".selectbox").hide();
        var self = $j(this);
        // show the selectbox for this link
        var thisSelectbox = $j(this).parents('.select').children('.selectbox').toggle();
        e.preventDefault();
    });
});

Это не работает, либо: 

var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j(".selectbox").hide();

    $j('.calcdropdown a').live('click',function(e) {
        $j(".selectbox").hide();
        var self = $j(this);
        var thisSelectbox = $j(this).parents('.select').children('.selectbox');
        if(thisSelectbox.is(':hidden')) {
            thisSelectbox.show();
        } else {
            thisSelectbox.hide();
        }
    });
});

Как я могу скрыть поля выбора после того, как я их показываю?

Ответы [ 2 ]

4 голосов
/ 30 июня 2011

Удалить $j(".selectbox").hide(); из функции щелчка.

В противном случае вы всегда делаете следующие шаги внутри функции щелчка:

  1. скрыть элемент
  2. переключение элемента (делает его видимым все время, потому что вы его раньше скрывали)

Редактировать: (я не осознавал, что вы используете более одного из этих элементов)

Чтобы скрыть все .selectbox, кроме того, который связан с кликом, используйте not (): 

var $j = jQuery.noConflict();
$j(document).ready(function() {
    // hide all the dropdowns by default
    $j(".selectbox").hide();

    $j('.calcdropdown a').live('click',function(e) {

        var target=$j(this).parents('.select').children('.selectbox');
            $j('.selectbox').not(target.toggle()).hide();
            e.preventDefault();
    });
});

http://jsfiddle.net/doktormolle/qG8ps/

2 голосов
/ 30 июня 2011

Исходя из ваших комментариев к другому ответу, вы ищете решение, которое:

  1. Скрывает все остальные меню
  2. Переключение видимости текущего меню

Это немного грязно, но если вы измените $j(".selectbox").hide(); в своем первом примере на $j(".selectbox").not($j(this).parents('.select').children('.selectbox')).hide();, вы должны получить поведение, за которым вы следуете.

Здесь скрываются все элементы .selectbox, за исключением того, который соответствует текущей ссылке. Тогда ваш звонок на toggle() должен работать как положено.

...