Question

我遇到了问题。我在我的网站上有一些子菜单，我用jQuery显示和隐藏。 #Sekundar是子菜单，但我想问的是，有没有更好的方法来检查菜单是否显示？

除非我在其上放置一个setInterval，否则我无法让它工作，我觉得这不是最好的方法吗？有什么建议吗？

这是JS代码：

function sekundarmenu() {
    $('#sekundar').fadeToggle();
    $('#sekundar2').hide();
    $('#sekundar3').hide();
    $('#sekundar4').hide();
    $('#sekundar5').hide();
}

setInterval(function () {
    if ($("#sekundar").is(":visible") || $("#sekundar").css("display")== "block") {
        $("#li1").css("background-color", "#24ac5f");
    }
    else {
        $("#li1").css("background-color", "transparent");
    }
}, 1);

HTML：

<nav id="primar">
                    <ul>
                        <li id="li1"><a onclick="sekundarmenu()" class="pointer">Indhold</a></li>
                        <li id="li2"><a onclick="sekundarmenu2()" class="pointer">Nyheder</a></li>
                        <li id="li3"><a onclick="sekundarmenu3()" class="pointer">Billeder</a></li>
                        <li id="li4"><a onclick="sekundarmenu4()" class="pointer">Bruger</a></li>
                        <li id="li5"><a onclick="sekundarmenu5()" class="pointer">Diverse</a></li>
                    </ul>
                </nav>
            </header>
            <div id="sekundar" class="sekundar">
                <nav class="nav2">
                    <ul>
                        <li><a href="#">Opret Tekster</a></li>
                        <li><a href="#">Rediger/Slet tekster</a></li>
                        <li><a href="#">Rediger kontakt</a></li>
                    </ul>
                </nav>
            </div>

Answer 1

在这个简单的示例中，您有一个显示或隐藏子菜单的按钮要验证菜单是否可见，只需使用toggleclass方法为其提供一个类，然后检查该类是否存在。

<!DOCTYPE HTML>
<html>
<head>
<style>
#sekundar{
    display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#test').click(function(){
       $('#sekundar').toggleClass('visible')
       if($('#sekundar').hasClass('visible')){
           alert('not visible')
           $('#sekundar').show()
           }else{
               alert('visible')
               $('#sekundar').hide()
           }
    })  

})
</script>
</head>
<body>
<div id="sekundar" class="sekundar">
    <nav class="nav2">
        <ul>
            <li><a href="#">Opret Tekster</a></li>
            <li><a href="#">Rediger/Slet tekster</a></li>
            <li><a href="#">Rediger kontakt</a></li>
        </ul>
    </nav>
</div>
<input name="" type="button" value="check" id="test">
</body>
</html>

Answer 2

由于有很多方法可以解决类似问题，因此您必须选择最适合您情况的方法在此Fiddle 我想通过在你的html代码中添加一些类来以另一种方式解决问题。
通过这种方式，jQuery代码大大减少了。
我还添加了在mouseleave上消失子菜单的功能，如果你不喜欢这个解决方案，你可以轻松删除小提琴中突出显示的代码行。
如果你喜欢这个解决方案，请记得以绿色标记我的答案;）
您需要的所有jQuery代码是：

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

    $('li.principal').click(function(){
        var whatSubmenu=$(this).attr('id').slice(1)
        $('li.principal').css("background-color", "transparent")
        $(this).css("background-color", "#24ac5f")
        $('div.sekundar').hide()
        $('.'+whatSubmenu).fadeIn()
        })

    /*IF you don't want the submenu disappear on mouseleave comment these lines of code*/
    $('div.sekundar').on('mouseleave',function(){
        $(this).hide()
        $('li.principal').css("background-color", "transparent")
        })

})
</script>

HTML：

   <header>
       <nav id="primar">
            <ul>
                <li class="principal" id="li1"><a class="pointer">Indhold</a></li>
                <li class="principal" id="li2"><a class="pointer">Nyheder</a></li>
                <li class="principal" id="li3"><a class="pointer">Billeder</a></li>
            </ul>
        </nav>
    </header>
    <div id="sekundar" class="sekundar i1">
        <nav class="nav2">
            <ul>
                <li><a href="#">Osadff</a></li>
                <li><a href="#">Rwefewg</a></li>
                <li><a href="#">Reehjy</a></li>
            </ul>
        </nav>
    </div>

    <div id="sekundar2" class="sekundar i2">
        <nav class="nav2">
            <ul>
                <li><a href="#">dgdgdg</a></li>
                <li><a href="#">sdfdfdg</a></li>
            </ul>
        </nav>
    </div>

    <div id="sekundar3" class="sekundar i3">
        <nav class="nav2">
            <ul>
                <li><a href="#">defdgdgdg</a></li>
            </ul>
        </nav>
    </div>

如何在没有setInterval函数的情况下检查subMenu是否显示？

2 个答案: