Блог

Главная - Вопросы по программированию - как открыть accordion, если его внутренний фильтр с помощью тега привязки

как открыть accordion, если его внутренний фильтр с помощью тега привязки

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я застрял в какой-то необычной ситуации. Я хочу перенаправить кнопку на конкретную страницу, где есть несколько фильтров категорий моделей велосипедов, а описание моделей похожих категорий упоминается на другой странице с таким же фильтром, но с внутренним фильтром, есть несколько аккордеонов в зависимости от моделей.

Всякий раз, когда я пытаюсь перенаправить ссылку на определенные модели, и ее аккордеон должен открыться, но он перенаправляет только на первый элемент. Вот код

введите описание изображения здесь

Я пытался добавить идентификатор после ссылки, но он не работает, потому что между ними есть фильтр

введите описание изображения здесь

 // add attempt here


$(document).ready(function() {
    $(".rm-box").hide();
});

$(document).ready(function(){
  $(".button").click(function(){
    var value = $(this).attr("data-filter");
    if (value == "all") 
    {
      $(".filters").hide('1000');
    }
    else
    {
      $(".filters").not("."   value).hide("1000");
      $(".filters").filter("."   value).show("1000");
    }

    $("ul .button").click(function(){
      $(this).addClass('active').siblings().removeClass('active');
    })
  })
})


$(document).ready(function() {
   var hash = window.location.hash;
   hash amp;amp; $('ul.myfilter a[href="'   hash   '"]').panel-body('show');
});  
 /* add helpful css here */

ul.myfilter {
    padding: 0;
    position: relative;
    width: 100%;
    margin: 10px 10px 30px;
}

.myfilter>li {
    list-style: none;
    float: left;
    padding: 10px 20px;
    color: #ffffff; 
    margin-right: 15px;
    font-family: 'Oswald';
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 24px;
}

.myfilter>li:hover, .active {
    color: #ff6501!important;
    font-size: 30px!important;
}
.filter-cont{
    padding: 0 30px;
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    background-color: #000000;
    width: 100%;
    margin: 0;
}

.iron-883{
height:400px;
    width: 100%;
    background-size: cover;
    background-position: 50%;
}

.acco-title:hover {
    text-decoration: none;
}
.acco-title {
    font-family: 'Montserrat';
    font-weight: 700;
    color: #ff6501 !important;
    font-size: 24px;
    text-transform: uppercase;
}

.colorview{
    position: relative;
    background-color: #363636;
    width: 40%;
    height: 500px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="myfilter">
  <li class="button active" data-filter="sportster">Sportster</li>
  <li class="button" data-filter="street">Street</li>
  <li class="button" data-filter="softail">Softail</li>
  <li class="button" data-filter="touring">Touring</li>
  <li class="button" data-filter="cvo">Cvo</li>
  <div style="clear: both;"></div>
</ul>

<div class="box filters sportster">
  <div class="row">
    <div class="col-md-6 col-xs-12 common-for-all">
      <div class="col-md-4 cmn-fit-img iron-883">
      </div>
      <div class="col-md-2 cmn-fit-txt wh-rhs">
        <h4>IRON 883</h4>
        <a class="orng-btn filt-bike-link" href="hdmodels.html#collapse1">Know More</a>
      </div>
    </div>
    <div class="col-md-6 col-xs-12 common-for-all">
      <div class="col-md-4 cmn-fit-img forty-8">
      </div>
      <div class="col-md-2 cmn-fit-txt orng-rhs">
        <h4>FORTY EIGHT</h4>
        <a class="white-btn filt-bike-link" href="hdmodels.html#collapse2">Know More</a>
      </div>
    </div>
  </div>
  <div class="row hd-sportster">
    <div class="col-md-6 col-xs-12 common-for-all">
      <div class="col-md-4 cmn-fit-img custom-1200">
      </div>
      <div class="col-md-2 cmn-fit-txt orng-rhs">
        <h4>1200 CUSTOM</h4>
        <a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
      </div>
    </div>
    <div class="col-md-6 col-xs-12 common-for-all">
      <div class="col-md-4 cmn-fit-img hd-roadster">
      </div>
      <div class="col-md-2 cmn-fit-txt wh-rhs">
        <h4>ROADSTER</h4>
        <a class="orng-btn filt-bike-link" href="hdmodels.html">Know More</a>
      </div>
    </div>
  </div>
</div>


<ul class="myfilter">
  <li class="button active" data-filter="street">Street</li>
  <li class="button" data-filter="sportster">Sportster</li>
  <li class="button" data-filter="softail">Softail</li>
  <li class="button" data-filter="touring">Touring</li>
  <li class="button" data-filter="cvo">Cvo</li>
  <div style="clear: both;"></div>
</ul>

<div class="box filters street">
  <div class="panel-group" id="streetaccordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
          Some Code
        </div>
      </div>
    </div>
  </div>
</div>

Комментарии:

1. таблица стилей / css, пожалуйста

2. смотрите, что изображения, нет никаких проблем с css, я застрял с логикой, как открыть определенную панель в фильтре @PunithaSubramaniYoganyaaS

3. Не могли бы вы, пожалуйста, поделиться своим кодом css и HTML в jsfiddle.

4. Пожалуйста, обновите свой вопрос, чтобы предоставить рабочий пример и то, что вы пробовали. Я не вижу здесь «accordion», просто немного html. Я сделал фрагмент вашего кода, чтобы помочь здесь.

5. @MarkSchultheiss соответствие находится на другой странице, а ссылка — на другой странице, есть 5 категорий, и в этих 5 категориях в каждой по 2-3 модели, так что в каждой категории по 2-3 аккордеона, которые я создал с помощью filter. если я захожу с другой страницы, щелкнув по одной модели, она должна перенаправлять на этот аккордеон внутри фильтра категорий вместо того, чтобы всегда открывать первый аккордеон

Ответ №1:

Я не собираюсь пытаться выяснить ВСЮ вашу функциональность, а просто отвечу на вопрос. Обратите внимание, где элемент с id collapse2 открыт при запуске этого.

Я использовал эту ссылку:https://getbootstrap.com/docs/4.0/components/collapse

Я изменил некоторые CSS и т.д. Просто, чтобы лучше показать это в этом ограниченном контексте более четко. Вы были близки, но ключ является селектором, а затем запускает show событие. Это ключевые строки: (комментарии в коде, обратите внимание, где они размещены)

 let hash = window.location.hash;
$('#'   hash).collapse('show');

Примечание стороны, я переместил их за пределы, UL поскольку UL может содержать li только элемент вложенного списка и добавил класс вместо встроенного стиля:

 <div class="clear-things"></div>

Ссылка https://www.w3.org/TR/html401/struct/lists.html#h-10.2

 $(function() {
  //$(".rm-box").hide();
  $("ul.myfilter").find(".button").on('color-siblings', function(event) {
    $(this).addClass('active').siblings().removeClass('active');
  }).on('click', function(event) {
    let filters = $(".filters");
    let value = $(this).data("filter");
    if (value == "all") {
      filters.hide('1000');
    } else {
      filters.not("."   value).hide("1000");
      filters.filter("."   value).show("1000");
    }
    $(this).trigger('color-siblings');
  });

  // code that toggles the collapse in the document ready event handler
  // could also be a custom event trigger like I show for the color above
  let hash = window.location.hash;
  hash = "collapse2"; // just to test - get hash as above
  // assumption of ID here thus the '#', ID MUST be unique so that is OK
  $('#'   hash).collapse('show');
});  
 /* add helpful css here */

div>ul.myfilter {
  background-color: #333333;
  border: solid 1px lime;
}


/*so we see it */

ul.myfilter {
  padding: 0;
  position: relative;
  width: 100%;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 30px;
}

.myfilter>li {
  list-style: none;
  float: left;
  padding-top: 1em;
  padding-right: 1.2em;
  color: #0165ff;
  margin-right: 0.25em;
  font-family: 'Oswald';
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 1.2em;
}

.myfilter>li:hover,
.active {
  color: #ff6501!important;
}

.filter-cont {
  padding: 0 30px;
  position: relative;
  padding: 30px;
  box-sizing: border-box;
  background-color: #000000;
  width: 100%;
  margin: 0;
}

.iron-883 {
  height: 10px;
  width: 100%;
  background-size: cover;
  background-position: 50%;
}

.acco-title:hover {
  text-decoration: none;
}

.acco-title {
  font-family: 'Montserrat';
  font-weight: 700;
  color: #ff6501 !important;
  font-size: 24px;
  text-transform: uppercase;
}

.colorview {
  position: relative;
  background-color: #363636;
  width: 40%;
  height: 500px;
}

.clear-things {
  clear: both;
}
.panel-body {border:solid blue 1px;}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample">
  <ul class="myfilter">
    <li class="button active" data-filter="sportster">Sportster</li>
    <li class="button" data-filter="street">Street</li>
    <li class="button" data-filter="softail">Softail</li>
    <li class="button" data-filter="touring">Touring</li>
    <li class="button" data-filter="cvo">Cvo</li>
  </ul>
  <div class="clear-things"></div>
  <div class="box filters sportster">
    <div class="row">
      <div class="col-md-6 col-xs-12 common-for-all">
        <div class="col-md-4 cmn-fit-img iron-883">
        </div>
        <div class="col-md-2 cmn-fit-txt wh-rhs">
          <h4>IRON 883</h4>
          <a class="orng-btn filt-bike-link" href="#collapse1">Know More</a>
        </div>
      </div>
      <div class="col-md-6 col-xs-12 common-for-all">
        <div class="col-md-4 cmn-fit-img forty-8">
        </div>
        <div class="col-md-2 cmn-fit-txt orng-rhs">
          <h4>FORTY EIGHT</h4>
          <a class="white-btn filt-bike-link" href="#collapse2">Know More</a>
        </div>
      </div>
    </div>
    <div class="row hd-sportster">
      <div class="col-md-6 col-xs-12 common-for-all">
        <div class="col-md-4 cmn-fit-img custom-1200">
        </div>
        <div class="col-md-2 cmn-fit-txt orng-rhs">
          <h4>1200 CUSTOM</h4>
          <a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
        </div>
      </div>
      <div class="col-md-6 col-xs-12 common-for-all">
        <div class="col-md-4 cmn-fit-img hd-roadster">
        </div>
        <div class="col-md-2 cmn-fit-txt wh-rhs">
          <h4>ROADSTER</h4>
          <a class="orng-btn filt-bike-link" href="#collapse3">Know More</a>
        </div>
      </div>
    </div>
  </div>
  <ul class="myfilter">
    <li class="button active" data-filter="street">Street</li>
    <li class="button" data-filter="sportster">Sportster</li>
    <li class="button" data-filter="softail">Softail</li>
    <li class="button" data-filter="touring">Touring</li>
    <li class="button" data-filter="cvo">Cvo</li>
  </ul>
  <div class="clear-things"></div>
  <div class="box filters street">
    <div class="panel-group" id="streetaccordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">
            Some Code 750 CC
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse2" class="acco-title">Harley-Davidson Forty Eight</a>
          </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse in">
          <div class="panel-body">
            Some Code Forty Eight Cheese bits
          </div>
        </div>
      </div>
    </div>
  </div>
</div>