【问题标题】:Submenu hides when trying to interact with any of the buttons尝试与任何按钮交互时隐藏子菜单
【发布时间】:2014-03-01 06:24:51
【问题描述】:

我在我的网站上使用 bootstrap 3 下拉菜单。下面的代码工作正常,问题是当我单击或尝试与 class="dropdown-menu" 内的任何元素交互时,子菜单会隐藏。

示例如果我点击class="dropdown-menu"整个子菜单项中的任何按钮。

下面是代码

<li class="header-request dropdown">
  <a href="#" class="dropdown-toggle sr-only" id="request-dropdown" data-toggle="dropdown"></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="request-dropdown">
    <div class="col-md-0 media-header bold">Friend Request</div>
    <div class="scroll">
    <?php
    $session_id = GET_SESSION_ID_VALUE(ENCRYPTION_KEY);
    $sql = "SELECT * FROM requests WHERE request_to='$session_id' LIMIT 10";
    $query = $db->SELECT($sql);
    if($db->NUM_ROWS() > 0){
      $rows = $db->FETCH_OBJECT();
      foreach($rows as $row){
        $request_id = $row->request_id;
        $request_from = $row->request_from;
    ?>
    <div class="row pad0" id="header-request-ID-<?php echo $request_id; ?>">
      <div class="col-md-6 name"><a href="/<?php echo get_username_by_id($request_from); ?>"><?php echo get_name_by_ID($request_from); ?></a></div>
      <div class="col-md-6 buttons">
        <button type="button" class="btn btn-success">Confirm</button>
        <button type="button" class="btn btn-danger btn-remove-request" data-ajax="header-remove-request" data-id="<?php echo $profile_hash; ?>">Reject</button>
      </div>
    </div>
    <?php
      }
    }
    ?>
    </div>
  </ul>
</li>

【问题讨论】:

  • 由于您的问题似乎与mysqlphp 无关,因此有一个示例来说明您的下拉列表中的html 代码是什么样的。
  • 能否请您提供bootply.comjsfiddle.net...

标签: javascript css twitter-bootstrap


【解决方案1】:

试试看……

在这里工作-http://www.bootply.com/117795

$('.dropdown-menu input,.dropdown-menu button').click(function(e) {
  e.stopPropagation();
});

【讨论】:

    【解决方案2】:

    好的,可以用 JavaScript 解决它。这是我网站上的工作代码:

    $('.dropdown-menu').click(function(){
        return false;
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-11-18
      • 1970-01-01
      相关资源
      最近更新 更多