Как остановить функцию JavaScript от воздействия на дочерний элемент? - PullRequest
Новая
       18

Как остановить функцию JavaScript от воздействия на дочерний элемент?

2 голосов
/ 22 февраля 2011

Я искал решение этой проблемы, но оно настолько шаткое, что я сомневаюсь, что многие его обдумали. Веб-приложение, которое я недавно унаследовал как веб-администратор, работает на Drupal (версия 6). К сожалению, я не могу изменить установку Drupal или создать собственную тему до мая из-за других обязательств, которые должны выполняться в первую очередь.

Прежде всего, я понимаю и от всего сердца согласен с тем, что существуют более эффективные (и элегантные) способы решения этой проблемы, но на данный момент это то, что клиент хочет и ему удобно внедрять.

В любом случае, старый администратор использовал Drupal для разработки навигации по сайту. Код, который Drupal выкладывает на HTML-странице: 

<ul class="menu">
<li class="expanded first"><a href="/" title="">Housing</a>
    <ul class="menu">
        <li class="leaf first"><a href="/housing_roster" title="" class="active">Housing Roster</a></li> 
        <li class="leaf"><a href="/my_floor" title="">My Floor</a></li> 
        <li class="leaf"><a href="/photoviewer" title="">Photo Viewer</a></li> 
        <li class="leaf last"><a href="/maintenance_viewer" title="">Building Maintenance</a></li> 
    </ul>
</li> 
<li class="expanded"><a href="/" title="">Reports</a>
    <ul class="menu">
        <li class="leaf first"><a href="/node/add/fr" title="">Build Floor Report</a></li> 
        <li class="leaf"><a href="/node/add/ir" title="">Submit Incident Report</a></li> 
        <li class="leaf last"><a href="/lockout" title="">Submit Lockout</a></li> 
    </ul>
</li> 
<li class="expanded"><a href="/" title="">Office</a>
    <ul class="menu">
        <li class="leaf first"><a href="/node/add/pack-in" title="">Check In Package</a></li> 
        <li class="leaf"><a href="/node/add/pack-out" title="">Check Out Building Package</a></li> 
        <li class="leaf"><a href="/node/add/package-out-all-blgds" title="">Check Out Campus Package</a></li> 
        <li class="leaf last"><a href="/node/add/equipment-out" title="">Check Equipment Out</a></li> 
    </ul>
</li> 
<li class="expanded"><a href="/" title="">Staff</a>
    <ul class="menu">
        <li class="leaf first"><a href="/node/add/preprogram" title="">Pre Programs</a></li> 
        <li class="leaf"><a href="/node/add/program" title="">Post Program</a></li> 
        <li class="leaf"><a href="/programs/semester" title="">Programming Database</a></li> 
        <li class="leaf last"><a href="/downloads" title="">Staff Downloads</a></li> 
    </ul>
</li> 
<li class="leaf"><a href="/users/twinchester">My account</a></li> 
<li class="leaf last"><a href="/logout">Log out</a></li>

Самая большая проблема, которую я имею в связи с этим выводом, состоит в том, что есть элемент ul с атрибутом класса «menu», вложенный в другой элемент ul с атрибутом class «menu».

Цель написанной мной функции JavaScript -

  1. Разрешить jQuery раскрывать и сворачивать дочерний элемент ul при каждом щелчке по соответствующему элементу li с классом "extended"
  2. Измените атрибут href ТОЛЬКО элементов li с классом "extended" на "javascript: void (null)", чтобы они не перенаправляли пользователя на какую-либо страницу

Вот функция JavaScript, которую я до сих пор выполняю: 

<script type="text/javascript"> 
    $(function() {
    //Hide the nested lists
        $('ul.menu li.expanded ul.menu').hide();
    //Change the destination of the header links
        $('ul.menu li.expanded a').attr("href", "javascript:void(null)");
    //Toggle the display of the nested lists
        $('ul.menu li.expanded a').click(function() {
                $(this).next().slideToggle('normal');
        });
    });
</script>

Это работает просто отлично, за исключением того, что он изменяет атрибут href вложенных элементов li на "javascript: void (null)". Есть ли способ, которым я могу изменить свою функцию JavaScript, чтобы убедиться, что она применяет новый атрибут href ТОЛЬКО к элементам li с классом "extended", а не к элементам li с классом "leaf"?

На данный момент меня действительно интересует только изменение моей функции JavaScript. Как я уже сказал, я знаю и согласен с тем, что существуют лучшие методы (например, изменение html-вывода темы Drupal для начала), но если я смогу быстро исправить это как временное решение, пока я перестраиваю все приложение, то было бы здорово!

Пожалуйста, дайте мне знать, если у вас есть предложения !!!

СПАСИБО !!!

Ответы [ 4 ]

3 голосов
/ 22 февраля 2011

Используйте более конкретный селектор: 

$('ul.menu > li.expanded > a').attr( ...

> соответствует только непосредственным детям вместо всех детей.

2 голосов
/ 22 февраля 2011

Если вы просто пытаетесь запретить браузеру следовать href, вам не нужен «javascript: void (null)».Вместо этого вы хотите остановить распространение события: 

$("ul.menu li.expanded > a").click(function(event) {
  event.stopPropagation();
  ...
});
0 голосов
/ 22 февраля 2011

Вы можете использовать прямой дочерний селектор ">". например: 

<script type="text/javascript"> 
    $(function() {
    //Hide the nested lists
        $('ul.menu li.expanded ul.menu').hide();
    //Change the destination of the header links
        $('ul.menu li.expanded > a').attr("href", "javascript:void(null)");
    //Toggle the display of the nested lists
        $('ul.menu li.expanded > a').click(function() {
                $(this).next().slideToggle('normal');
        });
    });
</script>
0 голосов
/ 22 февраля 2011

Вы можете попробовать 

$('ul.menu li.expanded>ul.menu').hide();

Это делает его применимым только к следующему элементу.

Другой способ будет использовать 

$('ul.menu li.expanded ul.menu:first').hide();
...