Question

我已经建立了一个带有个人资料下拉列表的导航栏（菜单的右侧）：

http://www.bootply.com/Rqj51l2VFO

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav" <!--style="width:96%" -->>
          <li><a href="{$settings['web_process_url']}?function=show_open_cases">Open Cases</a></li>
          <li><a href="{$settings['web_process_url']}?function=show_closed_cases">Closed Cases</a></li>
          <li><a href data-toggle="modal" data-target="#create_case" data-backdrop="true">Raise New Case</a></li>
          <li class="active"><a href="#">{$case['object_ref']}</a></li>
          <!-- <li style="float:right;"><a href="" data-toggle="modal" data-target="#help-modal"><span class="glyphicon glyphicon-question-sign"/></a></li> -->
        </ul>

        <!-- http://bootsnipp.com/snippets/featured/account-in-navbar -->
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown" id="menu">
            <a href="#" data-toggle="dropdown">
              <span class="glyphicon glyphicon-user"></span>
              <strong>{$person['name']}</strong>
              <span class="glyphicon glyphicon-chevron-down" style="margin-left: 10px;"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <div class="navbar-login" style="width: 400px;">
                  <div class="row">
                    <div class="col-lg-4">
                      <p class="text-center"><span class="glyphicon glyphicon-user icon-size" style="font-size: 75px;"></span></p>
                      <p><a href="#" data-toggle="collapse" data-target="#change_pic">Change Photo</a></p>
                    </div>
                    <div class="collapse" id="change_pic">
                      <p>Hi!</p>
                    </div>
                    <div class="col-lg-8">
                      <p class="text-left"><strong>Email Address</strong></p>
                      <p class="text-left small">{$person['main_location[email]']}</p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="divider"></li>
              <li>
                <div class="navbar-login navbar-login-session">
                  <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6">
                      <p><a href="{$settings['web_process_url']}?logout=1" class="btn btn-danger btn-block">Logout</a></p>
                    </div>
                    <div class="col-lg-3"></div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

当我点击更改照片链接时，我希望Div打开并且菜单保持打开状态，以便用户可以与输入进行交互，该输入显示用户将在配置文件中输入他们想要的照片的URL。

这很好但菜单消失了。所以我添加了以下JS，因此菜单保持不变：

JS：

$('#menu .dropdown-menu').on({
  "click": function(e) {
    e.stopPropagation();
  }
});

我遇到的问题是现在菜单保持打开状态 - 引导崩溃类不能显示/隐藏。

有人可以解释我在这里做错了吗？

Answer 1

这是在点击后保持下拉列表打开的一种方法，并使折叠类保持显示/隐藏状态。 ...

在更改照片按钮中添加ID：

background-image: url('../Assets/images/mountains.jpg') no-repeat center center fixed; 
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
           color: #fff;

使用以下功能：

<p><a href="#" id="change-photo" data-toggle="collapse" data-target="#change_pic">Change Photo</a></p>

在此处查看：http://www.bootply.com/8Yo0fBXgN9#

Bootstrap 3保持菜单打开并显示div

1 个答案: