Раскрывающийся список начальной загрузки для фильтрации в Ruby on Rails

Question

Я новичок в Ruby on Rails и у меня проблемы с переписыванием кода. У меня есть вкладки, которые можно использовать в качестве фильтров. Вот исходный код

<ul class="nav nav-tabs groups-tabs">
  <li role="presentation" class="active">
      <%= link_to 'All',  "#all", role: "tab", :"data-toggle" => "tab" %>
    </li>
    <li role="presentation" class="active">
      <%= link_to 'Python',  "#python", role: "tab", :"data-toggle" => "tab" %>
    </li>
    <li role="presentation" class="<%= ''%>">
      <%= link_to "Algorithms", "#algorithms", role: "tab", :"data-toggle" => "tab"  %>
    </li>
    <li role="presentation" class="<%= ''%>">
      <%= link_to "Web", "#web", role: "tab", :"data-toggle" => "tab"  %>
    </li>
  </ul>

  <div class="tab-content table-responsive" role="tablist">
    <div role="tabpanel" class="tab-pane active" id="all">
        <%= render 'requests',requests: @requests%>
      </div>
      <div role="tabpanel" class="tab-pane " id="python">
        <%= render 'requests',requests: @requests.python%>
      </div>
      <div role="tabpanel" class="tab-pane" id="algorithms">
        <%= render 'requests',requests: @requests.algorithms%>
      </div>
      <div role="tabpanel" class="tab-pane" id="web">
        <%= render 'requests',requests: @requests.web%>
      </div>
    </div>

Теперь я пытаюсь переписать эту логику как компонент «Dropdown» в Bootstrap. Запускается без ошибок, однако после нажатия на выпадающие разделы - они становятся неактивными:

Вот раскрывающийся список, который становится неактивным

Вот код для выпадающего списка:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active">
      <%= link_to 'All',  "#all", role: "tab", :"data-toggle" => "tab" %>
    </li>
    <li role="presentation" class="active">
      <%= link_to 'Python',  "#python", role: "tab", :"data-toggle" => "tab" %>
    </li>
    <li role="presentation" class="<%= ''%>">
      <%= link_to "Algorithms", "#algorithms", role: "tab", :"data-toggle" => "tab"  %>
    </li>
    <li role="presentation" class="<%= ''%>">
      <%= link_to "Web", "#web", role: "tab", :"data-toggle" => "tab"  %>
    </li>
  </ul>
</div>

И возникает вопрос: какие классы, роли, переключатели данных я должен заменить для корректной работы начальной загрузки?

Answer 1

Я надеюсь, что это то, что вы ищете.

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

<ul class="nav nav-tabs" role="tablist">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
      <li class="active">
        <a href="#all" role="tab" data-toggle="tab" aria-controls="all">All</a>
      </li>
      <li>
        <a href="#python" role="tab" data-toggle="tab" aria-controls="python">Python</a>
      </li>
      <li>
        <a href="#algorithms" role="tab" data-toggle="tab" aria-controls="algorithms">Algorithms</a>
      </li>
      <li>
        <a href="#web" role="tab" data-toggle="tab" aria-controls="web">Web</a>
      </li>
    </ul>
</ul>

<div class="tab-content table-responsive" role="tablist">
    <div role="tabpanel" class="tab-pane active" id="all">
        All tab content
    </div>
    <div role="tabpanel" class="tab-pane " id="python">
      Python tab content
    </div>
    <div role="tabpanel" class="tab-pane" id="algorithms">
      Algorithms tab content
    </div>
    <div role="tabpanel" class="tab-pane" id="web">
      Web tab content
    </div>
</div>