2

フィールドの 1 つをクリックすると、ドロップダウンが閉じます。再度開く必要があり、次のフィールドをクリックするまで入力できます。ドロップダウンを閉じても、値は保持されます。開いたままにするにはどうすればよいですか？

html.erb

<ul class="nav secondary-nav">      
  <li><%= link_to image_tag('icons/lock_icon.png') + " Log In" +('<span class="caret"></span>').html_safe , '#', { :class => 'dropdown-toggle', 'data-toggle' => 'dropdown' } %>

    <ul id="dropdown-login" class="dropdown-menu" style="padding: 10px 10px 0px 10px; width: 240px;">

      <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>

        <li> 
          <div>
            <%= f.label :email %><br />
            <%= f.email_field :email %>
           </div>
        </li> 

        <li>
          <div>
            <%= f.label :password %><br />
            <%= f.password_field :password %>
          </div>
        </li>

        <li> 
          <% if devise_mapping.rememberable? -%>

            <div>
              <%= f.check_box :remember_me %> <%= f.label :remember_me %>
            </div>
          <% end -%>
        </li> 

        <li>
          <div><%= f.submit "Sign in" %></div>
        </li>

      <% end %>
    </ul>
  </li>
</ul>

私はJavaScriptを使用していますが、1のように機能しません。

  <script type="text/javascript">
        $('#dropdown-login input, #dropdown-login label').click(function(e) {
            e.stopPropagation();
        });
  </script>

2.

 <script type="text/javascript">
    $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
    });
 </script>

3.

<script type="text/javascript">
  $('body')
    .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
    .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() });
</script>

そしてapplication.jsで

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
//= require redactor-rails
//= require_tree .
//= require bootstrap-alert
//= require bootstrap-dropdown

誰でも私の問題を解決できますか?

更新 - 解決済み

4

1 に答える 1

2

次のように、class="dropdown" を最初の li に追加します。

<li class="dropdown"><%= link_to image_tag('icons/lock_icon.png') + " Log In" +('<span class="caret"></span>').html_safe , '#', { :class => 'dropdown-toggle', 'data-toggle' => 'dropdown' } %>

そしてjavascriptを追加します..

 <script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>
于 2012-12-12T06:27:13.477 に答える