Question

我想隐藏每个导航链接，但是我的导航栏中的第一个链接。 slideUp()函数并没有隐藏它们。我有一个循环，应该检查导航链接是否具有“第一”类。如果它具有“第一”类，则链接保持在那里。如果导航链接没有“第一”类，则应该使用幻灯片动画隐藏它;但事实并非如此。

这是我的HTML：

<nav>
    <ul id='nav'>
        <li><a href="index.php"><icon><img src="images/home-icon.png"></icon>Home</a></li>
        <li><a href="skillsets.php"><icon><img src="images/skills-icon.png"></icon>Skillsets</a></li>
        <li><a href="gallery.php"><icon><img src="images/gallery-icon.png"></icon>Gallery</a></li>
        <li><a href="about.php"><icon><img src="images/about-icon.png"></icon>About</a></li>
        <li><a href="contact.php"><icon><img src="images/contact-icon.png"></icon>Contact</a></li>
    </ul>
</nav>

这是我的javascript：

var is_mobile = false,
    page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
    var ul = $('nav > ul'),
        li = ul.children('li'),
        href = li.find('a[href*="'+page+'"]'),
        is404 = true;
    if($('#mobile').css('display')=='none') {
        is_mobile = true;       
    }
    if(is_mobile) {
        orderList();
        prepareList();
    }
    /************************************************************/
    /* Reorders the list relative to the page the user is on   */
    /**********************************************************/
    function orderList() {
        //move element to top
        ul.prepend(href.parent());
        //set top elements class to "top"
        $(href).attr( "class", "top" );
        if(page != ""){
            //loop through the nav elements
            li.children('a').each(function(){
                //if the name of the page the user is on matches one of the nav links execute the command
                if (page == $(this).attr('href')) {
                    is404 = false;
                }
            });
            if (is404) {
                //if the user is on a page not in the nav, add a 404 link at the top of the nav
                ul.prepend("<li><a href='404NotFound.php' class='top'><icon><img src='images/404-icon.png'></icon>404</a></li>");
            }else{
                //set top links' class to "top"
                $(href).attr( "class", "top" );
            }
        }
    };
    /*****************************************************************/
    /* Prepares the list to be dynamically expandable/collapsible   */
    /***************************************************************/
    function prepareList() {
        //loop through the nav elements and differentiate the first nav link and the remaining nav links
        li.children('a').each(function(){
            //check if the link has the class: "first"
            if (first == $(this).attr('class')) {// attribute value matches variable value
                //make the first nav link function as the button to open and close the nav

            } else {// attribute doesn't exist, or its value doesn't match variable value
                //hide the remaining nav links with a slideUp animation
                $(this).slideUp("slow");
            }
        });
    }
});

任何想法的家伙？谢谢你的帮助！

Answer 1

您必须在脚本中编写“first”而不是first ..

这样写 if（“first”== $（this）.attr（'class'））代替 if（first == $（this）.attr（'class'））

在你的情况下，它首先被视为变量而不是字符串。

Answer 2

使用.hasClass方法可以检查类是否存在

只需将prepareList函数更改为

即可

function prepareList() {
            //loop through the nav elements and differentiate the first nav link and the remaining nav links
            li.children('a').each(function(){
                //check if the link has the class: "first"
                if($(this).hasClass("first")){

                }
                else{
                    $(this).slideUp("slow");
                }
            });
        }

.slideUp（）jQuery命令没有执行

2 个答案: