Любопытный случай переключения

Question

Я действительно новичок в JQuery и пытался понять, почему мой код JQuery, который я получил от другого пользователя, не будет работать, когда я поместил атрибут id в тег ol, но отлично работает, когда id атрибут помещается в тег nav. Если кто-то может так любезно объяснить эту проблему, спасибо.

HTML

<nav id="cat"> 
     <ol> 
     <li><a title="" href="#1">1;</a></li> 
     <li><a title="" href="#2">2</a></li> 
     </ol> 
    </nav> 

    <!-- DOES NOT WORK --> 
    <nav class="sub"> 
     <ol id="1"> 
     <li><a title="" href="">1a</a></li> 
     </ol> 
    </nav> 

    <!-- WORKS --> 
    <nav class="sub" id="2"> 
     <ol> 
     <li><a title="" href="">2a</a></li> 
     </ol> 
    </nav> 

JQuery

var $subs = $('.sub'); 
    $('#cat > ol > li > a').click(function() { 
     var href = $(this).attr('href'), 
     $target = $(href); 
     $target.stop().slideToggle('slow'); 
     $subs.not($target).stop().slideUp('slow'); 
    }); 

Вот скрипка enter link description here

Answer 1

Перемещение id=1 на ребенка ol означает, что ПР уже не также .sub. вам необходимо переместить обе идентификаторы в дочерних ol с, а затем обновить селектор $sub быть .sub > ol

http://jsfiddle.net/41rh3n4w/