jquery 帮助与切换

Question

好的，我的网站顶部有一个登录按钮，单击该按钮时会调用一些 jquery 来显示/隐藏登录框。

但我旁边有一个搜索框，当您单击它时，不仅无法输入它，而且还会切换登录框，第一个代码应该是 jquery，第二个代码是调用它的 html 部分。顺便说一句，它的 jquery 1.4.2。如果您想查看它，可以访问 http://www.stat-me.com 并单击“登录”，然后尝试单击“搜索”，

谢谢。

JQUERY：

<script src="js/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready
$(document).ready(function() {
    // trigger the function when clicking on an assigned element
    $(".toggle").click(function () {
        // check the visibility of the next element in the DOM
        if ($(this).next().is(":hidden")) {
            $(this).next().slideDown(); // slide it down
        } else {
            $(this).next().slideUp("fastS"); // hide it
        }
    });

 $(".exito").click(function () {
        // check the visibility of the next element in the DOM
        if ($(this).next().is(":hidden")) {
            $(this).next().show(); // slide it down
        } else {
            $(this).next().hide(); // hide it
        }
    });
});
</script>

HTML：

<span class="toggle" style="margin-top:-583px; margin-left:950px; position:relative;">

<a href="#">LOG IN</a>

</span>


<div class="secondehiddendiv">
<div class="chat-bubble">
  <h1 style="color:#F00">LOG IN!</h1>
<form name="login" method="post" action="login.php">
  <table style="margin-left:-5px; text-align:right; color:#F00;">
   <tr>
     <td>Email:</td>
        <td><input name="email" type="text" size="17" ></td>
    </tr>
    <tr>
     <td>Password:</td>
        <td><input name="password" type="password" size="17" ></td>
    </tr>
  </table>

  <div class="log_in_img">
  <input type="image" src="http://www.stat-me.com/images/log_in_jq.png" alt="LOG IN"  >
  </div>
</form>

  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>

</div>
</div>

Answer 1

您的切换跨度在搜索框前面延伸：

---

您可以通过向切换添加 50px 的宽度来修复它（就像您所做的那样） ，或者更好（正如帕特里克建议的那样）将其添加到相关表中：

<td>
  <span class="toggle">
    <a href="#">LOG IN</a>
  </span>
</td>

Answer 2

您的 .toggle 范围位于页面底部，并使用大量边距定位到顶部/右侧。

为什么采取这种方法？为什么不将其放在您要单击的元素所在的同一个表中？

它不起作用的原因是您将 span 设置为显示为 block 元素，这意味着它的宽度自动扩展到其父级的宽度，因此它覆盖搜索按钮和登录按钮。