未遵循下拉菜单中的链接

时间:2014-08-05 15:39:34

标签: javascript jquery xhtml

当用户点击ABC时,它应该转到abc.php。但它不会。如果我在jquery代码中返回true,则单击Sub时它不会向下滑动。请给我一个解决方案。

<script type="text/javascript">
    $js(document).ready(function() {

        //Class 'contentContainer' refers to 'li' that has child with it.
        //By default the child ul of 'contentContainer' will be set to 'display:none'
        $js("#treeMenu li").toggle(

            function() { // START FIRST CLICK FUNCTION
                $js(this).children('ul').slideDown()
                if ($js(this).hasClass('contentContainer')) {
                    $js(this).removeClass('contentContainer').addClass('contentViewing');
                }

            }, // END FIRST CLICK FUNCTION

            function() { // START SECOND CLICK FUNCTION
                $js(this).children('ul').slideUp()

                if ($js(this).hasClass('contentViewing')) {
                    $js(this).removeClass('contentViewing').addClass('contentContainer');
                }

            } // END SECOND CLICK FUNCTIOn
            //return true; If used this, slide down is not working
        ); // END TOGGLE FUNCTION
    }); // END DOCUMENT READY
</script>

html如下

<div id="left_menu">
    <h2 style="text-align: center;margin-bottom: 0px;color: #000000">Our Ministry</h2>
    <ul id="treeMenu">
        <li><a href="abc.php">ABC</a></li>
        <li><a href="def.php">DEF</a></li>
        <li><a href="ghi.php">GHI</a></li>
        <li class="contentContainer"><a href="#">Sub</a>
            <ul>
                <li><a href="jkl.php">JKL</a></li>
                <li><a href="mno.php">MNO</a></li>
                <li><a href="pqr.php">PQR</a></li>
                <li><a href="stu.php">STU</a></li>
            </ul>
        </li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

似乎你可以像这样简化:

http://jsfiddle.net/isherwood/8s923/3

<li class="parent contentContainer"><a href="#">Sub</a>

$(document).ready(function () {
    $("#treeMenu li.parent > a").click(function (e) { // START FIRST CLICK FUNCTION
        e.preventDefault();
        $(this).closest('li').toggleClass('contentContainer contentViewing')
            .children('ul').slideToggle();
    }); // END TOGGLE FUNCTION
}); // END DOCUMENT READY

解决方案是仅将preventDefault应用于操作下拉菜单的特定锚点,方法是为它们提供一个未切换的类。

不要忘记重新申请别名。