Question

我正在使用我网站上的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>

Answer 1

试试吧......

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

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

Answer 2

好的，能用JavaScript解决它。这是我网站上的工作代码：

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

尝试与任何按钮进行交互时，子菜单会隐藏

2 个答案: