如何使用锚点标签打开手风琴的内部过滤器

时间：2019-03-30 12:15:19

标签： javascript html css

我陷入了一些异常情况。我想将按钮重定向到特定页面，在该页面上有多个自行车模型的类别过滤器，而在另一页中提到了类似类别模型的描述，其中相同类型的过滤器但内部过滤器中，根据模型有多个手风琴。

每当我尝试将链接重定向到特定模型时，它的手风琴都应打开，但仅重定向到第一个元素。这是代码

enter image description here

我尝试在链接后添加id，但由于在两者之间存在过滤器而无法正常工作

enter image description here 

// 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 && $('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 个答案:

答案 0 :(得分：0)

我不会尝试弄清您的所有功能，而只是解决这个问题。请注意，编号为#include <stdio.h> int print_binary(unsigned char x, int num) { if ( num == 0) { printf("%d",x); return 0; } print_binary(x/2, num-1); printf("%d",x%2); /* print this digital only after finding other ones */ return 0; } int main() { char x; scanf("%d",&x); print_binary(x,7); /* iteration takes up to 8 times */ } 的元素在运行时在何处打开。

我使用了以下引用：https://getbootstrap.com/docs/4.0/components/collapse/

我修改了一些CSS等，只是为了在有限的上下文中更好地展示它。您已经关闭，但是关键是选择器，然后触发collapse2事件。这些是关键行：（代码中的注释，请注意它们的放置位置）

show

请注意，由于let hash = window.location.hash; $('#' + hash).collapse('show'); 只能包含UL或嵌套列表项，所以我将它们移到了UL之外，并添加了类而不是嵌入式样式：

li

引用https://www.w3.org/TR/html401/struct/lists.html#h-10.2 

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

$(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;}

相关问题
最新问题