Как я могу переместить ссылки на один встроенный? - PullRequest
Новая
       10

Как я могу переместить ссылки на один встроенный?

0 голосов
/ 29 мая 2018

Я пробовал этот 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;
}

Исходный код http://jsfiddle.net/6t6BP/4/ измененный мной код https://jsfiddle.net/Lavi2/yyfhrss0/

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Пример полного кода 

$(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>
0 голосов
/ 29 мая 2018

Одним из решений было бы сделать dropdown-container, чтобы не толкать элементы вниз.Вы можете сделать это, в вашем случае, с помощью position:absolute и поместить его relative на ссылку, которая его запускает.

PS это не просто 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>
...