Question

我有site。在左侧菜单中有类别make with panel collapse（bootstrap）。问题：选择类别时如何操作，此面板必须打开。面板关闭，因为页面已更新这是面板代码：

<div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#collapse2">Электрика</a>
    </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <ul class="list-group">
    <?php foreach ($categories2 as $categoryItem): ?>
      <li class="list-group-item">
          <a href="/category2/<?php echo $categoryItem['id'];?>" class="list2">
            <p style="text-align: left; height: 5px;"><?php echo $categoryItem['name'];?></p>
          </a>
      </li>
    <?php endforeach; ?>
    </ul>
  </div>

活动类和开放面板的js代码：

var $dropdowns = $('.list-group-item');
var $collapse = $('.panel-collapse');
$dropdowns.click(function() {
  if ( $(this).hasClass('active') ){
     $(this).toggleClass('active');
     $collapse.show();
  }else {
     $dropdowns.removeClass('active');
     $(this).toggleClass('active');
  }});

Answer 1

您需要在每次加载页面时检查您的网址。您可以使用PHP执行此操作，并决定是否添加活动类。 bootstrap中的活动类似乎是in。我只想修改一行代码如下：

<div id="collapse2" class="panel-collapse collapse <?= ($url === "page1")?"in":"" ?>" aria-expanded="true">

$url表示您尝试获取的当前uri，例如www.example.com/ page1 ，uri可以通过$url = $_SERVER['REQUEST_URI']获得。其余的只是简单的三元运算符，可以缩短if条件。

Answer 2

要将菜单显示为已展开，请在＆＃34; 类中添加＆＃34;以及一个额外属性的 咏叹调发泡=＆＃34;真＆＃34;

<div id="collapse2" class="panel-collapse collapse in" aria-expanded="true">

所以示例代码将是。

<div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse2">Электрика</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse in" aria-expanded="true"> <ul class="list-group"> <?php foreach ($categories2 as $categoryItem): ?> <li class="list-group-item"> <a href="/category2/<?php echo $categoryItem['id'];?>" class="list2"> <p style="text-align: left; height: 5px;"><?php echo $categoryItem['name'];?></p> </a> </li> <?php endforeach; ?> </ul> </div>

Answer 3

为您的菜单链接添加JS ID，该链接应该在页面加载时打开（或默认打开）

<a data-toggle="collapse" href="#collapse2" id="click_menu">Электрика</a>

在页面加载下调用JS函数

function default_menu_selection() {
   $("#click_menu").trigger('click')
}

这将打开页面刷新菜单

http://api.jquery.com/trigger/

Bootstrap 3折叠 - 必须保持打开此面板

3 个答案: