jquery - 试图隐藏一个没有成功的jquery元素

Question

可能我忽略了一件非常简单的事情，但我似乎找不到使用 jquery mouseenter 隐藏#panel div 的方法。无论我尝试什么，它都无济于事。我已多次检查所有代码，并加载了所有必需的库。我想要实现的是，如果用户在 drop 类和任何

该类中的标签，然后#panel 保持隐藏。我只想在用户完全离开菜单时显示#panel。有人可以指出我的错误。谢谢

HTML 代码

<ul id="menu">
  <li class="menu_right"><a href="#" class="drop">Contact Us</a><!-- Begin 3 columns Item -->

        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->

            <div class="col_3">
                <h2>Which dept do you need to contact!</h2>
            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a id="anchorTest" href="#">Technical</a></li>
                    <li><a href="#">Administrative</a></li>
                </ul>   

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="#">Billing</a></li>
                    <li><a href="#">Report Error</a></li>
                </ul>   
            <br />
            <div id="formShow">
              <form action="feedback.php" method="post" class="webform">
                <fieldset>
                <legend><span>Submit Technical Report</span></legend>
                <label for="dept">Deaprtment</label>
                <input id="dept" name="dept" class="text" type="text" />
                <label for="name">Full Name:</label>
                <input id="name" name="name" class="text" type="text" />
                <label for="email">Email address:</label>
                <input id="email" name="email" class="text" type="text" />
                <label for="position">Position:</label>
                <input id="Position" name="Position" class="text" type="text" />
                <label for="Feedback">Exact Problem:</label>
                <textarea name="Feedback" cols="20" rows="3">Please make sure that any error messages or numbers are listed here.</textarea>
                </fieldset>
                <input class="submit" type="submit"  name="submit" value="Submit Report" />
              </form>
            </div>

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="#">General</a></li>

            </div>

            <div class="col_3">
                <h2>Here are some image examples</h2>
            </div>


            <div class="col_3">
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>

                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
            </div>

        </div><!-- End 3 columns container -->

    </li><!-- End 3 columns Item -->


</ul>

jQuery代码

$(function() {
 $("#menu .drop li").mouseenter(function(){
  $("#panel").hide();
});
 });
$(function() {
 $("#menu .drop li").mouseleave(function(){
  $("#panel").show();
});

面板html

<div id="panel">
        <h3><a href="#">Quick Panel</a></h3>
    <div><span class="newitems">Here, you can view the last 10 stats of your users actions. For example, Logs, Intakes, Returns etc.</span><br />
  </div>
</div>

Answer 1

使用

 $("#menu .drop li")

仅适用于父级为“drop”的 li 元素，而父级的父级为“menu”。而且我在您的 html 代码中没有看到类似的内容。使用你的选择器并不意味着“要么.drop” li，而是“li在里面.drop”