HTML CSS jQuery Двухуровневое меню - PullRequest
Новая
       6

HTML CSS jQuery Двухуровневое меню

1 голос
/ 19 ноября 2011

Итак, я сделал эту супер урезанную версию меню навигации html css jquery и, учитывая приведенный ниже код, обрабатывает элементы подменю так, как если бы это был содержащий li. Я полагаю, я могу понять, что он видит подменю ul как часть li. Возникает вопрос: как мне отделить такое поведение, чтобы ссылки подменю действительно отслеживались, а не предотвращались по умолчанию? 

<html>
<head>
<style type="text/css">
    #content ul {margin:0;}
    #content ul li {float:left; background:#000; list-style:none;}
    #content ul li a {display:block; text-decoration:none; padding:10px 40px;}
    #content ul li ul {position:absolute; padding:0;}
    #content ul li ul li {float:none; background:#ccc;}
</style>
</head>

<body>
<div id="content">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li>
            <a href="#">3</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
            </ul>
        </li>
        <li><a href="#">4</a></li>
    </ul>
</div>          
</body>
</html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$('#content ul li').has('ul').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});
</script>

Редактировать: я хочу, чтобы все ссылки верхнего уровня и ссылки подменю работали как обычно. Единственными вещами, которыми я пытаюсь манипулировать, являются лии верхнего уровня с подменю.

1 Ответ

1 голос
/ 19 ноября 2011

Если вы измените свой начальный селектор так, чтобы он нацеливался на первые дочерние якоря «контента», как это: 

$('#content > ul > li > a').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});

Это будет работать.Я бы порекомендовал просто добавить класс css к каждому тегу привязки, с которым вы хотите связать событие click.Это будет намного чище и с меньшей вероятностью сломается при изменении разметки. 

<div id="content">
    <ul>
        <li><a class="mainNav" href="#">1</a></li>
        <li><a class="mainNav" href="#">2</a></li>
        <li>
            <a class="mainNav" href="#">3</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
            </ul>
        </li>
        <li><a class="mainNav" href="#">4</a></li>
    </ul>
</div>

и 

$("#content .mainNav").click(function(e) { e.preventDefault(); });

Обновление

ВашОригинальный ответ был действительно близок.Проблема заключалась в том, что вы выбирали все элементы-потомки li.Я добавил селектор детей, чтобы исправить это. 

$('#content ul li').has('ul').children('a').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...