В то время выбиралось только одно выпадающее меню

Я совершенно новый в этом поле и то, что у меня есть до сих пор, - это два независимых раскрывающихся меню. Я стараюсь, чтобы пользователь мог выбирать только один из них одновременно. Например, если пользователь выберет что-то, dropdown 1а затем выберите другую вещь dropdown 2, dropdown 1чтобы не отобразиться.

Вот фрагмент того, что у меня есть в моей части html

<div id="d1" class="wrapper-dropdown-5 active" tabindex="1">
  <span>DropDown 1</span>
  <ul class="dropdown">
    <li>...</li>
    <li><a href="#"><img src="" alt=""/>Car 1</a></li>
    <li><a href="#"><img src="" alt=""/>Car 2</a></li>
  </ul>
</div>

<div id="d2" class="wrapper-dropdown-5 bottom" tabindex="1">
   <span>Dropdown 2</span>
  <div>
  <ul class="dropdown">  
    <li>...</li>
    <li><a href="#"> <img src="" alt=""/>Truck 1</a></li>
    <li><a href="#"> <img src="" alt=""/>Truck 2</a></li>
  </ul>
  </div>
</div>

Вот JS

  function DropDown(el) {

      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown > li');
      this.val = '';
      this.index = -1;
      this.initEvents();

  }

  DropDown.prototype = {

      initEvents : function() {
      var obj = this;
          obj.dd.on('click', function(event){

          $(this).toggleClass('active');
          return false;

          });

          obj.opts.on('click',function(){
             var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);

          });
      },

      getValue : function() {
              return this.val;
      },

      getIndex : function() {
            return this.index;
      }

      }

      $(function() {
          var dd = new DropDown( $('#d1') );

          $(document).click(function() {
          $('.wrapper-dropdown-5').removeClass('active');

          });
      });

        $(function() {
                    var dd = new DropDown( $('#d2') );

          $(document).click(function() {
              $('.wrapper-dropdown-5').removeClass('active');
          });
        });

Это простая демонстрация. Вы можете заметить, что вы можете выбрать одно и то же время на одном автомобиле и на одном грузовике. В то время должен быть только автомобиль или только грузовик: https://jsfiddle.net/j82ryu5k/2/

javascript,jquery,html,drop-down-menu,

1

Ответов: 1

0 принят

Возможно, что-то вроде этой скрипки будет работать для вас.

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div id="d1" class="wrapper-dropdown-5 active" tabindex="1">
                <span data-text="?s???»??">?s???»??</span>
                <ul class="dropdown">
                    <li>...</li>
                    <li>
                        <a href="#"><img src="" alt="" />?s???»?° 1</a>
                    </li>
                    <li>
                        <a href="#"><img src="" alt="" />?s???»?° 2</a>
                    </li>
                </ul>
            </div>
            <div id="d2" class="wrapper-dropdown-5 bottom" tabindex="1">
                <span data-text="?s?°??????????">?s?°??????????</span>
                <div>
                    <ul class="dropdown">
                        <li>...</li>
                        <li>
                            <a href="#"> <img src="" alt="" />?s?°???????? 1</a>
                        </li>
                        <li>
                            <a href="#"> <img src="" alt="" />?s?°???????? 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Автор сценария:

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}

DropDown.prototype = {

initEvents : function() {
    var obj = this;
    obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
    });

    obj.opts.on('click',function(){
        var opt = $(this);
        $('div > span').not(opt).each(function() {
            $(this).text($(this).data('text'));
        });
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text(obj.val);
    });
},

getValue : function() {
    return this.val;
},

getIndex : function() {
    return this.index;
}

}

$(function() {
    var dd = new DropDown( $('#d1') );

    $(document).click(function() {
        $('.wrapper-dropdown-5').removeClass('active');
    });
});

$(function() {
    var dd = new DropDown( $('#d2') );

    $(document).click(function() {
        $('.wrapper-dropdown-5').removeClass('active');
    });
});
JavaScript, JQuery, HTML, выпадающее меню,
Похожие вопросы
Яндекс.Метрика