如何移动一个内联上的链接？

Question

我已经尝试过这个CSS，但当你点击第一个链接时，其他两个链接将移动到底部，其他链接也是如此。我试图更改初始代码，并将链接放在一个类中，但我不知道那么多JavaScript，所以我的修改可能是非常错误的。如何在一行上移动链接？这样当你点击一个链接时，切换后的列表就会出现，而不会影响到链接的位置，所以所有的链接仍然在一行上。

HTML

<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Javascript
$(document).ready(function(){

    $("a.dropdown-link").click(function(e) {
      e.preventDefault();
      var $div = $(this).next('.dropdown-container');
      $(".dropdown-container").not($div).hide();
        if ($div.is(":visible")) {
            $div.hide()
        }  else {
           $div.show();
        }
    });

    $(document).click(function(e){
        var p = $(e.target).closest('.dropdown').length
        if (!p) {
              $(".dropdown-container").hide();
        }
    });

});

CSS
.dropdown{
  display:inline-block;
}

由me代码https://jsfiddle.net/Lavi2/yyfhrss0/修改的初始代码http://jsfiddle.net/6t6BP/4/

Answer 1

一种解决方案是使dropdown-container不向下推送元素。在您的例子中，您可以使用position:absolute并将其定位为触发它的链接的relative。

另外，这不仅仅是javascript，它还是jQuery。

​

$(document).ready(function(){

    $("a.dropdown-link").click(function(e) {
      e.preventDefault();
      var $div = $(this).next('.dropdown-container');
      $(".dropdown-container").not($div).hide();
        if ($div.is(":visible")) {
            $div.hide()
        }  else {
           $div.show();
        }
    });

    $(document).click(function(e){
        var p = $(e.target).closest('.dropdown').length
        if (!p) {
              $(".dropdown-container").hide();
        }
    });
     
});

.dropdown{
  display:inline-block;
  position:relative
}
.dropdown-container {
  position:absolute;
  left:0;
  top:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

​

Answer 2

完整的代码示例

​

$(document).ready(function(){

    $("a.dropdown-link").click(function(e) {
      e.preventDefault();
      var $div = $(this).next('.dropdown-container');
      $(".dropdown-container").not($div).hide();
        if ($div.is(":visible")) {
            $div.hide()
        }  else {
           $div.show();
        }
    });

    $(document).click(function(e){
        var p = $(e.target).closest('.dropdown').length
        if (!p) {
              $(".dropdown-container").hide();
        }
    });

});

.dropdown{
  display:inline-block;
  vertical-align:top;
}
.dropdown-container ul{
  list-style:none;
  padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

​