Установка высоты обратно на 0 после переключения класса

Question

Установка высоты обратно на 0 после переключения класса

0

У меня есть следующий HTML и JS. Когда вы нажимаете .slidedown-toggle он переключает класс "open" на родительский (.slidedown) и применяет к нему высоту sibling (.nav-sub). Это работает, но то, что не работает, устанавливает высоту назад до 0, когда этот "открытый" класс отсутствует. Что мне не хватает?

HTML

<li class="slidedown">
  <a href="#">Parent Link</a>
  <!-- Dropdown arrow -->
  <span class="slidedown-toggle">
    <span class="caret"></span>
  </span>
  <!-- Submenu -->
  <ul class="nav nav-sub">
    <li>
      <a href="#">Child Menu Item 1</a>
    </li>
  </ul>
</li>

JS

$(function navCollapse(){

  var slidedownToggle = $( '#global-nav .slidedown-toggle' );

  slidedownToggle.click( function() {
    var slidedown = $(this).parent( '.slidedown' );
    var navOpen = $( '#global-nav li.open' );
    var subnav = $(this).siblings( '.nav-sub' );
    var subnavHeight = subnav.height();

    slidedown.toggleClass( 'open' );

    if (navOpen){
      subnav.height( subnavHeight );
    }else{
      subnav.height( 0 );
    }

  });

});

davidpauljunior 22 янв. 2014, в 04:23

Источник

Теги:

javascript

jquery

2 ответа

0

LIVE DEMO

  var $gNav = ('#global-nav');

  $('.slidedown-toggle', $gNav).click( function( e ) { 

    var myLI = $(this).closest('.slidedown');
    var isON = myLI.hasClass('open');

    // ALL
    $('li.open', $gNav).removeClass('open').find('.nav-sub').slideUp();

    // THIS
    myLI.toggleClass('open', !isON).find('.nav-sub').stop().slideToggle();  

  });

Roko C. Buljan 22 янв. 2014, в 00:20

0

Это не то, что задал вопрос? Я не хочу никакой анимации через JS, поэтому я рассчитываю высоту.
davidpauljunior 22 янв. 2014, в 03:07
0

@ davidpauljunior высота чего? subnav = $(this).siblings( '.nav-sub' ); все ваши .subnav elements ? зачем?
Roko C. Buljan 22 янв. 2014, в 03:12
0

Я хочу высоту '.nav-sub', который является родственным для переключателя слайд-тауна, по которому щелкнули. Я хочу, чтобы я мог перейти с помощью CSS. Мой запасной вариант - использовать максимальную высоту, но я не хочу угадывать максимальную высоту самого длинного списка.
davidpauljunior 22 янв. 2014, в 03:19
0

Но я только что понял, почему это не сработает из-за вычисления высоты с помощью JS и установки ее в 0 в CSS. Возвращается на круги своя.
davidpauljunior 22 янв. 2014, в 03:43
0

@davidpauljunior CSS - единственное, что мы упустили в вашем вопросе, возможно, чтобы помочь вам что-то получить. Возможно, вам никогда не поздно показать нам в расширенной демонстрации, что вы делаете
Roko C. Buljan 22 янв. 2014, в 03:49
0

Благодарю. Я еще раз подумаю и вернусь, когда все прояснится. Я пометил другой ответ правильно, так как он выполнил то, о чем просил, хотя оказалось, что он мне не очень помог.
davidpauljunior 22 янв. 2014, в 03:52
0

Я повторно добавил свой вопрос с лучшим описанием того, чего я пытаюсь достичь. Если бы вы могли взглянуть, это было бы удивительно, но, конечно, нет никакого давления. stackoverflow.com/questions/21274905/...
davidpauljunior 22 янв. 2014, в 05:28
0

@davidpauljunior снова, вы не добавили пример CSS / или / демо jsBin.com ... Я постараюсь сделать все возможное. Кстати, вы могли бы редактировать этот вопрос вместо создания дубликата ...
Roko C. Buljan 22 янв. 2014, в 05:33

Показать ещё 6 комментариев

Ещё вопросы

Это не то, что задал вопрос? Я не хочу никакой анимации через JS, поэтому я рассчитываю высоту.
@ davidpauljunior высота чего? subnav = $(this).siblings( '.nav-sub' ); все ваши .subnav elements ? зачем?
Я хочу высоту '.nav-sub', который является родственным для переключателя слайд-тауна, по которому щелкнули. Я хочу, чтобы я мог перейти с помощью CSS. Мой запасной вариант - использовать максимальную высоту, но я не хочу угадывать максимальную высоту самого длинного списка.
Но я только что понял, почему это не сработает из-за вычисления высоты с помощью JS и установки ее в 0 в CSS. Возвращается на круги своя.
@davidpauljunior CSS - единственное, что мы упустили в вашем вопросе, возможно, чтобы помочь вам что-то получить. Возможно, вам никогда не поздно показать нам в расширенной демонстрации, что вы делаете
Благодарю. Я еще раз подумаю и вернусь, когда все прояснится. Я пометил другой ответ правильно, так как он выполнил то, о чем просил, хотя оказалось, что он мне не очень помог.
Я повторно добавил свой вопрос с лучшим описанием того, чего я пытаюсь достичь. Если бы вы могли взглянуть, это было бы удивительно, но, конечно, нет никакого давления. stackoverflow.com/questions/21274905/...
@davidpauljunior снова, вы не добавили пример CSS / или / демо jsBin.com ... Я постараюсь сделать все возможное. Кстати, вы могли бы редактировать этот вопрос вместо создания дубликата ...

Arun P Johny · Accepted Answer · 2014-01-22T00-48-00.000Z

$( '#global-nav li.open' ) вернет объект jQuery, который всегда будет правдивым, вам нужно проверить, имеет li элемент li к которому принадлежит текущий элемент toggle, открытый класс.

Вы можете использовать.closest(), чтобы найти элемент li а затем использовать.hasClass(), чтобы проверить, присутствует ли класс

$(function navCollapse() {

    var slidedownToggle = $('#global-nav .slidedown-toggle');

    slidedownToggle.click(function () {
        var slidedown = $(this).parent('.slidedown');
        var $li = $(this).closest('li');
        var subnav = $(this).siblings('.nav-sub');
        var subnavHeight = subnav.height();

        slidedown.toggleClass('open');

        if ($li.hasClass('open')) {
            subnav.height(0);
        } else {
            subnav.height(subnavHeight);
        }

    });

});

Благодарю. Я только что понял, что: а) Если я установлю высоту в CSS на 0, тогда этот скрипт вычислит высоту до 0. б) После того, как скрипт установит высоту на 0 при втором щелчке, он будет вычислять только как 0 с тех пор. Возможно, вернемся к чертежной доске.