Question

我已经把这个问题挂了很久了，在搜索了许多不同的问题之后，希望有人可以帮我一点。

当用户点击应该始终固定在我网站底部的标签时，我正在使用jquery slidetoggle打开一个小窗口。我的问题是，当我在底部有多个标签并且单击一个标签时，两者都会升到div的顶部。我希望它们独立移动，以便在单击其中一个时，另一个固定在我的网页底部。我已经尝试了几种CSS样式和定位配置，并且无法解决这个问题。

我已经简化了我的代码，并添加了一个小提琴，所以如果有人有任何建议，我一定会很感激。

的Javascript

$(function() {
  $("a#toggle2").click(function() {
    $("#contact2").slideToggle();
    return false;
  });
});

$(function() {
  $("a#toggle3").click(function() {
    $("#contact3").slideToggle();
    return false;
  });
});

CSS

.icx_link_parent {
  position: fixed;
  bottom: 0;
  right: 100px;
  color: #888;
}

.icx_link2 {
  border-radius: 5px 5px 0 0;
  background: #D9072D;
  padding: 3px;
  float: right;
  color: #888;
}

.icx_link3 {
  border-radius: 5px 5px 0 0;
  background: #D9072D;
  padding: 3px;
  float: right;
  color: #888;
}

#contact2 {
  display: none;
  background: #FFFFFF;
  color: #FFF;
}

#contact3 {
  display: none;
  background: #FFFFFF;
  color: #FFF;
}

#chatbox2 {
  width: 100% margin-left: auto;
  margin-right: auto;
  margin-top;
  0;
  margin-bottom: 0;
  background-color: #D9072D;
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  font-weight: bold;
  display: inline-block;
}

#chatbox3 {
  width: 100% margin-left: auto;
  margin-right: auto;
  margin-top;
  0;
  margin-bottom: 0;
  background-color: #D9072D;
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  font-weight: bold;
  display: inline-block;
}

HTML

<div class="icx_link_parent">


  <div class="icx_link2">
    <table id="chatbox2">
      <tr>
        <td align="center" id="chatline2" bgcolor="#D9072D" nowrap>
          <a href="#" id="toggle2" style="text-decoration:none">
            <span style="display: inline;"><font color="white">&nbsp; Row 2</font></span>
          </a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <p id="contact2" align="center">TEST 2</p>
        </td>
      </tr>
    </table>
  </div>

  <div class="icx_link3">
    <table id="chatbox3">
      <tr>
        <td align="center" id="chatline3" bgcolor="#D9072D" nowrap>
          <a href="#" id="toggle3" style="text-decoration:none">
            <span style="display: inline;"><font color="white">&nbsp; Row 1</font></span>
          </a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <p id="contact3" align="center">TEST 3</p>
        </td>
      </tr>
    </table>
  </div>
</div>

https://jsfiddle.net/frubo5pm/2/

将slidetoggle div固定在页面底部

0 个答案: