Question

如何更改我的点击功能以使用li而不是标签，我尝试将类移到li但是它不起作用。我已经使用了标签上的toggle-sub-nav封闭类。

我想将此更改为<li>处理正在构建的主题：

HTML：

<nav id="main-nav" role="navigation">
        <div class="block">
            <h2 class="block-title">Main menu</h2>
             <ul>
                <li class="is-active">
                    <a href="#">Link</a>
                </li><!--
             --><li class="toggle-sub-nav closed">
                    <a href="#">Link</a>
                      <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li class="is-active"><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li><!--
             --><li class="toggle-sub-nav closed">
                    <a class="toggle-sub-nav closed" href="#">Link</a>
                    <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li>
            </ul>
            <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
        </div>
    </nav>

CSS：

.js .sub-nav {


    max-height: 0;
    width: 100%;
    background-color:#E4E1E1;
    overflow:hidden;
    position: static;
    top: 41px;
    -webkit-transition: max-height 200ms ease-out;
    -moz-transition: max-height 200ms ease-out;
    -o-transition: max-height 200ms ease-out;
    transition: max-height 200ms ease-out;

}

  .js .sub-nav-open {

    max-height: 400px; 
    position: static;
    border-right: none;
    top: 0;
    -webkit-transition: max-height 500ms ease-in;
    -moz-transition: max-height 500ms ease-in;
    -o-transition: max-height 500ms ease-in;
    transition: max-height 500ms ease-in;

        }

.closed { background: url(../assets/img/arrows.svg) no-repeat 95% -22px; }

.open { background: url(../assets/img/arrows.svg) no-repeat 95% 15px; }

Jquery的：

$(function () {
    $(".toggle-sub-nav").click(function () {
        if ($(this).siblings('ul').hasClass('sub-nav-open')) {
            $(this).removeClass('open').siblings('ul').find('sub-nav-open').andSelf().removeClass('sub-nav-open')
        } else {
             $('.toggle-sub-nav').not($(this).closest('.toggle-sub-nav')).removeClass('open');
            $('.sub-nav').not($(this).closest('.sub-nav')).removeClass('sub-nav-open');
            $(this).toggleClass('open').next(".sub-nav").toggleClass('sub-nav-open');
        }
        return false;
    });

});

Answer 1

我相信它会运作良好

$("ul").on("click", "li.toggle-sub-nav", function () {});

如何更改单击功能以使用<li>而不是<a> tag</a> </li>

1 个答案: