JS slidetoggle on UL

Я пытаюсь slidetoggle ul. Но я застрял.JS slidetoggle on UL

Вот мой вопрос:

Эти коды работают:

<div class="splitleft" onclick="toggle_item(b)"> 
     <?php echo $admin_logs ?> 
     <ul class="menu" id="b"> 
      <li><a href="index.php?content=admin&page=show_logs_all"><?php echo $admin_logs_desc ?></a></li> 
      <li><a href="index.php?content=admin&page=show_logs_player"><?php echo $admin_watch_players ?></a></li> 
      <li><a href="index.php?content=admin&page=show_logs_admins"><?php echo $admin_watch_admins ?></a></li> 
     </ul> 
    </div> 
<script>function toggle_item(e){$(e).slideToggle();}</script>

Но я не хочу этого. Я хочу, как это:

<ul class="menu" onclick="toggle_item(b)" id="b"> 
    <li><a href="index.php?content=admin&page=show_logs_all"><?php echo $admin_logs_desc ?></a></li> 
    <li><a href="index.php?content=admin&page=show_logs_player"><?php echo $admin_watch_players ?></a></li> 
    <li><a href="index.php?content=admin&page=show_logs_admins"><?php echo $admin_watch_admins ?></a></li> 
</ul>

Может кто-нибудь помочь мне :) Я действительно не хорошо на JS ..

источник

2013-05-04 Alihan Pehlivan

Ваш элемент UL не содержит никакого «пробела» на странице, если элементы LI внутри не видны. Поэтому щелчок ничего не сделает, если событие привязано к UL.

Вам нужно прикрепить событие к тому, что пользователь может на самом деле нажать. Без какой-либо код, чтобы уточнить это все, что я могу сделать, это спекулировать ...

HTML:

<div class="splitleft"> 
    <?php echo $admin_logs ?> 
    <a id="ulOpener" href="#">Click me to open the UL</a> 
    <ul class="menu" id="b"> 
     <li><a href="index.php?content=admin&page=show_logs_all"><?php echo $admin_logs_desc ?></a></li> 
     <li><a href="index.php?content=admin&page=show_logs_player"><?php echo $admin_watch_players ?></a></li> 
     <li><a href="index.php?content=admin&page=show_logs_admins"><?php echo $admin_watch_admins ?></a></li> 
    </ul> 
</div>

JS:

jQuery(function($) { 
    $('#ulOpener').click(function() { 
     $('#b').slideToggle(); 
    }); 
});

источник

2013-05-04 19:57:14

+1 для объяснения причин, почему это не будет работать точно так, как хочет OP. Вот [скрипка] (http://jsfiddle.net/WDmFH/), чтобы показать, что вы описали. – naththedeveloper

Спасибо. Это работает. –

Вы с помощью JQuery. Это легкий подход. В вашем <head> тег добавить этот <script>:

jQuery(function($){ 
    $('#b').click(function(jqEvt) { 
     $(this).find('li').slideToggle(); 
    }); 
});

Далее объясняя биты и куски:

jQuery(function($){...}) является коротким и уверен, что форма $(document).ready(function(){...}). Параметр, переданный функции, является объектом jQuery. Эта версия гарантирует, что вы будете использовать среду jQuery, если другая использует переменную $.

$('#b') Надеюсь, у вас достаточно знаний, чтобы понять это. Если нет, это ваш селектор, который вызывает jQuery для выбора вашего несортированного элемента списка. Фактически он выбирает последний элемент с атрибутом id="b", хотя должен быть только один. Все остальное будет искаженным HTML.

.click(function(jqEvt) {...}) связывает прослушиватель событий событий щелчка по выбранным элементам. Параметр jqEvt является стандартизованным объектом события.

$(this).children().slideToggle();this контекст объект AFAIK идентичен jqEvt.target, так что это будет ваш div тег. Поскольку вы просите свернуть теги li, вы можете выбрать их с помощью метода .find(). Для выбора всех последующих элементов требуется другой селектор.

источник

2013-05-04 19:42:36 Kiruse

Работа на DIVs .. но не workig на ULS :( Это точно моя проблема .. –

+1 правильный ответ. Однако лучше всего поместить все javascript в нижнюю часть элементов тела (где это возможно). Это позволяет быстрее загружать страницы. –

@AlihanPehlivan, пожалуйста, напишите JSFiddle вашего код. –

JS slidetoggle on UL

ответ

Смежные вопросы