0

Есть список дропдаунов(Bootstrap3).Код одного из них:

<li class="col-md-3 col-xs-12 filter-item">
                <div class="sidebar">
                    <div class="dropdown widget">
                        <button class="dropdown-filter widgettitle title dropdown-toggle" type="button" data-toggle="dropdown" >
                            <span class="filter-name">SORT BY</span>
                            <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                        </button>

                        <ul class="dropdown-menu product-categories">

                            <li class="cat-item">
                                Item1
                            </li>
                            <li class="cat-item">
                                Item2
                            </li>
                           <li class="cat-item">
                                Item2
                            </li>                                                                                   
                        </ul>
                    </div>
                </div>
            </li>

Задача при открытии дропдауна по клику,придать ему обводку сверху,слева и справа. Напилил следующий скрипт:

$(document).ready(function () {

               $(".filter-item .sidebar .dropdown", this).on("click", function(){

                    $(".filter-item .sidebar .dropdown").each(function(){
                         $(this).find("button").css ('border', '1px solid transparent'); // В данном цикле очищаются границы у всех 3 дропдаунов(без него если открыть один дропдаун,потом кликнуть на другой, у кнопки первого остаются границы)
                    });
                    $(this).find("button").css ({'border-top': '1px solid #cccccc',
                                                                           'border-left': '1px solid #cccccc',
                                                                            'border-right': '1px solid #cccccc'
                                                                            });// Здесь по задумке должны присваиваться границы кнопке
                    if( !$(this).hasClass('open') ) {

                        $(this).find("button").css ('border', '1px solid transparent');
                    }
               });// Тут я проверяю,если дропдаун открыт. Если закрыт,то границ быть не должно

        });

К сожалению, отрабатывает код не так как хотелось бы. При клике на кнпоку дропдауна,он открывается,но кнопка не получает border. Когда закрываю дропдаун, границы появляются(ощущение,что он в любом случае попадает в if).В чем ошибка?

2

2 ответа 2

1

Слишком много кода для решения такой задачи.

Намного проще задать стили в css:

.dropdown.open .dropdown-toggle {
  border-color: #f00;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="sidebar">
  <div class="dropdown widget">
    <button class="dropdown-filter widgettitle title dropdown-toggle" type="button" data-toggle="dropdown">
           <span class="filter-name">SORT BY</span>
           <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
        </button>
    <ul class="dropdown-menu product-categories">
      <li class="cat-item">
        Item1
      </li>
      <li class="cat-item">
        Item2
      </li>
      <li class="cat-item">
        Item2
      </li>
    </ul>
  </div>
</div>

1

Согласно документации - подробнее, я использовал действие show.bs.dropdown, когда вызвано действие показа. И соответственно hide.bs.dropdown при закрытии дропдавна.

$('.dropdown').on('show.bs.dropdown', function() {
  $('.dropdown-toggle').css({
    "border-top": "solid 2px red",
    "border-right": "solid 2px red",
    "border-left": "solid 2px red"
  });
});

$('.dropdown').on('hide.bs.dropdown', function() {
  $('.dropdown-toggle').css({
    "border": "solid 2px transparent"
  });
});
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    button {
      border: solid 2px transparent;
    }
  </style>

</head>

<body>

  <li class="col-md-3 col-xs-12 filter-item">
    <div class="sidebar">
      <div class="dropdown widget">
        <button class="dropdown-filter widgettitle title dropdown-toggle" type="button" data-toggle="dropdown">
           <span class="filter-name">SORT BY</span>
           <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
        </button>
        <ul class="dropdown-menu product-categories">
          <li class="cat-item">
            Item1
          </li>
          <li class="cat-item">
            Item2
          </li>
          <li class="cat-item">
            Item2
          </li>
        </ul>
      </div>
    </div>
  </li>

</body>

</html>

show.bs.dropdown This event fires immediately when the show instance method is called. hide.bs.dropdown This event is fired immediately when the hide instance method has been called.

5
  • В вопросе же ясно видно, что рамка должна быть у кнопки, а не у списка
    – Cheg
    16 сен 2017 в 13:07
  • @Cheg, вот теперь вроде то что надо:)
    – user242433
    16 сен 2017 в 13:11
  • 1
    @Cactus, логичнее, наверное, сразу задать бордер прозрачный, а потом выставлять только цвет, что бы не скакало .. 16 сен 2017 в 13:12
  • @Cactus, я предлагаю сразу в стилях задать .dropdown-toggle { border: 2px solid transparent; border-width: 2px 2px 0 2px; }, а при клике просто задавать цвет ... 16 сен 2017 в 13:16
  • @MedvedevDev, да уже обновил, спасибо за совет, не сразу допер))
    – user242433
    16 сен 2017 в 13:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.