jquery帮助切换

Question

好吧所以我在我的网站顶部有一个登录按钮，当点击时会调用一些jquery来显示/隐藏登录框。

但是我旁边有一个搜索框，当你点击它时不仅无法输入它，而且它还会切换登录框，第一个代码应该是jquery，而secong是html部分，叫它。顺便说一下它的jquery 1.4.2。如果你想看到它，你可以访问http://www.stat-me.com并点击登录并尝试点击搜索bo

感谢。

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

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

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

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

Answer 2

您的切换范围在搜索框前方展开：

---

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

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