この時点でドロップダウンを1つだけ選択します

Question

私はこの分野で全く新しいです。私がこれまでに持っていたのは2つの独立したドロップダウンメニューです。私はその時にどちらか一方からのみ選択できるようにユーザーを作ろうとしています。たとえば、ユーザがdropdown 1から何かを選択し、dropdown 2から別のものを選択した場合は、dropdown 1が選択されなくなります。ここで

はここ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'); 
      }); 
     }); 

これは簡単なデモである私は私の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> 

に持っているものの抜粋です。同じ時間に1台の車と1台のトラックを選択できます。当時の車または唯一のトラックでなければなりません：のようなものがおそらくあなたのために働くでしょう： https://jsfiddle.net/j82ryu5k/2/

Answer 1

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="Коли">Коли</span> 
       <ul class="dropdown"> 
        <li>...</li> 
        <li> 
         <a href="#"><img src="" alt="" />Кола 1</a> 
        </li> 
        <li> 
         <a href="#"><img src="" alt="" />Кола 2</a> 
        </li> 
       </ul> 
      </div> 
      <div id="d2" class="wrapper-dropdown-5 bottom" tabindex="1"> 
       <span data-text="Камиони">Камиони</span> 
       <div> 
        <ul class="dropdown"> 
         <li>...</li> 
         <li> 
          <a href="#"> <img src="" alt="" />Камион 1</a> 
         </li> 
         <li> 
          <a href="#"> <img src="" alt="" />Камион 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'); 
    }); 
});