2016-12-28 2 views
0

У меня есть site. В левом меню есть категория make с разбиением панели (бутстрап). Вопрос: Как это сделать при выборе категории, эта панель должна быть открыта. Панель закрыта, потому что страница обновлена. Это код панели:Bootstrap 3 Collapse - необходимо оставить эту панель

<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> 

расслоение плотной код для активного класса и открытой панели:

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'); 
    }}); 
+0

Что вы используете для загрузки своих страниц? это PHP? если это так, вам сначала нужно будет получить URL-адрес, чтобы узнать, на какой странице вы находитесь. То, как у вас есть это прямо сейчас, не будет работать, потому что когда ваша страница перезагружается, это действие щелчка становится устаревшим. Вам нужно сначала получить свой URL-адрес, а затем создать условное условие, которое сделает их активными, если URL-адрес соответствует вашему состоянию. – CodeGodie

+0

вы также можете использовать PHP, чтобы проверить, соответствует ли ваш URL-адрес .. что-то вроде 'if $ url === 'page1' добавить активный класс, else keep inactive' – CodeGodie

ответ

-1

Чтобы показать меню, как израсходованы добавить «в» класса и один дополнительный атрибут aria-extended = "true"

<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> 
+0

Что он попросил, меню должно быть активным после того, как он посетил категорию стр. Код, который вы отправили, не будет активировать меню –

0

Вам нужно проверить свой URL на каждой загрузке страницы. Вы можете сделать это с помощью PHP и решить, добавлять ли активный класс. Активным классом в bootstrap кажется in. Я бы просто изменить одну строку кода следующим образом:

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

$url представляет текущий URI вы пытаетесь получить как www.example.com/ стр.1, УИР может быть получено $url = $_SERVER['REQUEST_URI']. Остальное - просто простой тернарный оператор, чтобы сократить условное условие if.

-1

Добавить JS идентификатор для вашей ссылки меню, которое, как предполагается, будет открыта на странице загрузки (или быть по умолчанию открыта)

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

Вызов ниже функции JS на странице загрузки

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

Это откроет меню на странице обновления

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

+0

Почему голос? –

Смежные вопросы