如何检查子菜单是否显示没有setInterval功能

How to check if subMenu is shown without setInterval function?

本文关键字：显示 是否 功能 setInterval 菜单 何检查 检查      更新时间：2023-09-26

我遇到了一个问题。我在我的网站上有一些子菜单，我用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>

既然有许多方法可以解决类似的问题，您必须选择最适合您的情况。
在这把小提琴里我想通过在HTML代码中添加一些类以另一种方式解决问题。
这样可以大大减少jQuery代码。我还添加了在mouseleave上消失子菜单的功能，如果您不喜欢这个解决方案，您可以轻松删除在fiddle中突出显示的代码行。
如果你喜欢这个解决方案，记得用绿色标记我的答案;)
你需要的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>

在这个简单的例子中，您有一个按钮显示或隐藏子菜单。
要验证菜单是否可见，只需使用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>
相关文章：