Заставить братьев и сестер работать в jquery сворачивающемся меню - PullRequest
Новая
       17

Заставить братьев и сестер работать в jquery сворачивающемся меню

1 голос
/ 17 февраля 2012

Я собрал быстрый скрипт для сворачивающегося меню и использовал $(location).attr('pathname'), чтобы сопоставить пункт меню с текущей страницей и установить для него класс. Похоже, единственная проблема заключается в том, что некоторые имена путей плохо сочетаются с партией .siblings('ul').hide().

Я сделал это таким образом, чтобы избежать вспышки, когда все пункты меню закрываются, а затем соответствующее меню быстро открывается. Но я замечаю, что на страницах с путями , такими как страница номер два и страница номер четыре, пункты меню для этих страниц не открываются. Они, однако, применяют «текущий» класс.

Итак, пара вопросов.

  1. Вероятно, из-за того, что черточки приводят к неправильной оценке строки, или, скорее всего, из-за того, что я произвольно закрывал активное меню из-за того, как я связал ее вместе? Постскриптум Вот скрипка, в которой я удалил цепочку братьев и сестер и спрятал меню от отдельного вызова, но из-за характера URL он не может работать на самом деле. http://jsfiddle.net/contendia/ddXBU/

  2. Кроме того, существует ли какая-либо уязвимость XSS для использования пути таким образом? Стоит ли его дезинфицировать, и если да, то как? 

    $(document).ready(function() {
 // Get the URI path and strip the leading slash
 var path = $(location).attr('pathname').replace(/\//, ""); 
 // Get and append the querystring
 path += $(location).attr('search');  
 // Go up 2 levels (a > li > ul) and open. Hide all others.
 $('#leftmenu a[href="' + path + '"]').addClass('current').parent().parent().slideDown().siblings('ul').hide();

$('#leftmenu h3').click( 
    function() {
        var $this = $(this);
        $this.next('ul').siblings('ul').slideUp();
        $this.next().slideToggle(300); 
 });
 });



 <div id="leftmenu">
 <h3>First Menu</h3>
 <ul>
    <li><a href="page_number_one">Underscores</a></li>
    <li><a href="page-number-two">Hyphens</a></li>
 </ul>

 <h3>Second Menu</h3>
 <ul>
   <li><a href="page_number_three">Underscores</a></li>
   <li><a href="page-number-four">Hyphens</a></li>
 </ul>
 </div>
...