Пытаясь выяснить, как заставить обе кнопки не показывать раскрывающийся список, когда нажата только одна

issue

Вот мой html-код

<form action="{{ url_for('crudSEapi.gcp_image_search') }}" method="post">
    <div class="row">
        <div class="col-md-4" style="width: fit-content;">
                  <input type='text' name="data" class="test"/>
                  <button name="forwardBtn" type="submit">Search Image Name</button>
        </div>
       
        <div class="col-md-4 input-group left" >
                  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" >&nbsp;</span></button>
                  <div class="dropdown-menu dropdown-menu-right" >
                    <ul class="category_filters" >
                     {%for d in test%}
                      <li>
                      <input type="radio" name="{{d.keyword1}}" id="{{d.keyword1}}" value="{{d.keyword1}}" ><label class="category-label" for="{{d.keyword1}}" >{{d.keyword1}}</label>
                      </li>
                    {%endfor%}
                    
                    </ul>
                  </div>
                  
                   <button type="button" class="btn btn-secondary dropdown-toggle2 dropdown2-toggle-split tag1" data-toggle="dropdown2" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Security</span> <span class="caret" >&nbsp;</span></button>
                  <div class="dropdown-menu dropdown-menu-left" >
                    <ul class="category_filters2" >
                     {%for d in test%}
                      <li>
                      <input type="radio" name="{{d.keyword2}}" id="{{d.keyword2}}" value="{{d.keyword2}}" ><label class="category-label" for="{{d.keyword2}}" >{{d.keyword2}}</label>
                      </li>
                    {%endfor%}
                    
                    </ul>
                  </div>
                </div>
         <div class="col-md-4 input-group2 right" >
                 
                </div>
        </div>

    </div>

</form>

Я использую бутстрап с jquery

Как мне заказать мои 2 группы ввода? как мне выровнять 2 кнопки раскрывающегося списка и отображать только раскрывающееся меню для каждой кнопки

0
BlackFox 18 Мар 2021 в 03:27

2 ответа

Лучший ответ

Как упоминал @harjinder, вы, похоже, пропустили добавление раскрывающейся оболочки. Вот рабочий образец, который может помочь

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="margin: 40px">                                         
  <div class="dropdown" style="display: inline-block">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" >&nbsp;</span></button>
    <div class="dropdown-menu dropdown-menu-right" >
      <ul class="category_filters" >
        <li><input type="radio" name="input1" id="input1" value="input1" ><label class="category-label" for="input1" >input1</label></li>
        <li><input type="radio" name="input2" id="input2" value="input2" ><label class="category-label" for="input2" >input2</label></li>
      </ul>
    </div>
  </div>
  <div class="dropdown" style="display: inline-block">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" >&nbsp;</span></button>
    <div class="dropdown-menu dropdown-menu-left" >
      <ul class="category_filters" >
        <li><input type="radio" name="input3" id="input3" value="input3" ><label class="category-label" for="input3" >input3</label></li>
        <li><input type="radio" name="input4" id="input4" value="input4" ><label class="category-label" for="input4" >input4</label></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>
1
Vinu Prasad 22 Мар 2021 в 03:04

Используйте оболочку в обоих раскрывающихся меню.

<form action="{{ url_for('crudSEapi.gcp_image_search') }}" method="post">
<div class="row">
    <div class="col-md-4" style="width: fit-content;">
              <input type='text' name="data" class="test"/>
              <button name="forwardBtn" type="submit">Search Image Name</button>
    </div>
   
    <div class="col-md-4 input-group left" >
            <div class="dropdown">
              <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split tag1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Networking</span> <span class="caret" >&nbsp;</span></button>
              <div class="dropdown-menu dropdown-menu-right" >
                <ul class="category_filters" >
                 {%for d in test%}
                  <li>
                  <input type="radio" name="{{d.keyword1}}" id="{{d.keyword1}}" value="{{d.keyword1}}" ><label class="category-label" for="{{d.keyword1}}" >{{d.keyword1}}</label>
                  </li>
                {%endfor%}
                
                </ul>
              </div>
            </div>
              
            <div class="dropdown">
               <button type="button" class="btn btn-secondary dropdown-toggle2 dropdown2-toggle-split tag1" data-toggle="dropdown2" aria-haspopup="true" aria-expanded="false" ><span class="label-icon" >Security</span> <span class="caret" >&nbsp;</span></button>
              <div class="dropdown-menu dropdown-menu-left" >
                <ul class="category_filters2" >
                 {%for d in test%}
                  <li>
                  <input type="radio" name="{{d.keyword2}}" id="{{d.keyword2}}" value="{{d.keyword2}}" ><label class="category-label" for="{{d.keyword2}}" >{{d.keyword2}}</label>
                  </li>
                {%endfor%}
                
                </ul>
              </div>
            </div>
          </div>
     <div class="col-md-4 input-group2 right" >
             
            </div>
    </div>

</div>
-1
Harjinder kumar 18 Мар 2021 в 16:50