时间戳

首页 > 解决方案 > 引用非活动轮播项目中的元素

javascript - 引用非活动轮播项目中的元素

问题描述

在轮播中查找问题时，我遇到了搜索框问题。

搜索框用于在 FAQ 列表中查找问题。

当用户从搜索框中单击一个问题时，href 会将他带到轮播中的该特定问题。但是，如果我选择的问题不在轮播的当前活动项目中，则不会发生任何事情。例如，如果我在轮播的第一个选项卡上搜索“问题 3”，我找不到任何“问题 3”（参见代码中的示例）。

我该如何解决这个问题？

//LOADER
$(window).on("load",function(){
  $(".loader-wrapper").fadeOut("slow");
});

// searchbox
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Hide countries when no input is given
  if (input.value.length == 0) {
    ul.style.display = "none";
    return;
  } else {
    ul.style.display = "block";
  }

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "block";
    } else {
      li[i].style.display = "none";
    }
  }
}


// FAQs
const items = document.querySelectorAll(".accordion button");

function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');

  for (i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }

  if (itemToggle == 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}

items.forEach(item => item.addEventListener('click', toggleAccordion));
body{
  background-color: #cddadaff;
}
/* - - - - CAROUSEL - - - - */
.carousel-indicators li {
    background-color: #17171cff;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.carousel-indicators {
    position: absolute;
    bottom: -100px;
}

#FAQlist {
  padding: 6% 15% 2%;
}

#FAQs {
  padding-bottom: 450px;
}

/* - - - - Searchbar - - - - */
#myInput {
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
  font-weight: lighter;
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li {
  margin: 0px;
}

#myUL li a {
  border: 1px solid #ddd;
  /* Add a border to all links */
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  /* Grey background color */
  padding: 12px;
  /* Add some padding */
  text-decoration: none;
  /* Remove default text underline */
  font-size: 18px;
  /* Increase the font-size */
  color: black;
  /* Add a black text color */
  display: block;
  /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
  /* Add a hover effect to all links, except for headers */
}

/* Style the search field */
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

/* - - - - FAQ - - - - */
@import url('https://fonts.googleapis.com/css?family=Hind:300,400&display=swap');
 * {
     box-sizing: border-box;
}
 *::before, *::after {
     box-sizing: border-box;
}

 .containerFAQ {
     margin: 0 auto;
     padding: 0;
     width: 80%;
}
 .accordion .accordion-item {
     border-bottom: 1px solid #e5e5e5;
}
 .accordion .accordion-item button[aria-expanded='true'] {
     border-bottom: 1px solid #03b5d2;
}
 .accordion button {
     position: relative;
     display: block;
     text-align: left;
     width: 100%;
     padding: 1em 0;
     color: #7288a2;
     font-size: 1.15rem;
     font-weight: 400;
     border: none;
     background: none;
     outline: none;
}
 .accordion button:hover, .accordion button:focus {
     cursor: pointer;
     color: #03b5d2;
}
 .accordion button:hover::after, .accordion button:focus::after {
     cursor: pointer;
     color: #03b5d2;
     border: 1px solid #03b5d2;
}
 .accordion button .accordion-title {
     padding: 1em 1.5em 1em 0;
}
 .accordion button .icon {
     display: inline-block;
     position: absolute;
     top: 18px;
     right: 0;
     width: 22px;
     height: 22px;
     border: 1px solid;
     border-radius: 22px;
}
 .accordion button .icon::before {
     display: block;
     position: absolute;
     content: '';
     top: 9px;
     left: 5px;
     width: 10px;
     height: 2px;
     background: currentColor;
}
 .accordion button .icon::after {
     display: block;
     position: absolute;
     content: '';
     top: 5px;
     left: 9px;
     width: 2px;
     height: 10px;
     background: currentColor;
}
 .accordion button[aria-expanded='true'] {
     color: #03b5d2;
}
 .accordion button[aria-expanded='true'] .icon::after {
     width: 0;
}
 .accordion button[aria-expanded='true'] + .accordion-content {
     opacity: 1;
     max-height: 60em;
     transition: all 200ms linear;
     will-change: opacity, max-height;
}
 .accordion .accordion-content {
     opacity: 0;
     max-height: 0;
     overflow: hidden;
     transition: opacity 200ms linear, max-height 200ms linear;
     will-change: opacity, max-height;
}
 .accordion .accordion-content p, li {
     font-size: 1rem;
     font-weight: 300;
     margin: 2em 0;
   color: #8f8f8f;
}


/* dividers */
.heading-1 {
  font-family: "PTSerif-Regular", serif;
        font-size: 28px;
        letter-spacing: 0.08em;
        font-weight: 300;
        color: #17171cff;
        text-shadow: 0 1px 1px #FFFFFF;
}

.divider-1 {
        border-bottom: 1px solid #96c5b0ff;
        background-color: black;
        height: 1px;
        margin: 0.5em 0px 1.5em;
}

.divider-1 span {
        display: block;
        width: 444px;
        height: 1px;
        background-color: #17171cff;
}

.divider-2 {
        border-bottom: 1px solid #96c5b0ff;
        background-color: black;
        height: 1px;
        margin: 0.5em 0px 1.5em;
}

.divider-2 span {
        display: block;
        width: 486px;
        height: 1px;
        background-color: #17171cff;
}

.dividerline {
  padding: 0 10% 0 10%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/v4-shims.css">

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <title></title>
</head>

<body>

  <!-- SearchBar -->

  <section id="FAQlist">
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type a question..">
    <ul id="myUL" style="display: none">
      <li><a href="#accordion-button-1">Question1?</a></li>
      <li><a href="#accordion-button-2">Question2?</a></li>
      <li><a href="#accordion-button-3">Question3?</a></li>
      <li><a href="#accordion-button-4">Question4?</a></li>
      <li><a href="#accordion-button-5">Question5?</a></li>
      <li><a href="#accordion-button-6">Question6?</a></li>
    </ul>
  </section>


  <!-- FAQs -->

  <section id="FAQs">
    <div class="dividerline">
      <h1 class="heading-1">Frequently asked questions</h1>
      <div class="divider-1"> <span></span>
      </div>
    </div>

    <div id="slider" class="carousel slide" data-ride="carousel" data-interval="5000">
      <ol class="carousel-indicators">
        <li data-target="#slider" class="active" data-slide-to="0"></li>
        <li data-target="#slider" data-slide-to="1"></li>
        <li data-target="#slider" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="containerFAQ">
            <div class="accordion">
              <div class="accordion-item">
                <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Question1?</span><span class="icon" aria-hidden="true"></span></button>
                <div class="accordion-content">
                  <p>Answer1</p>
                </div>
              </div>
              <div class="accordion-item">
                <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Question2?</span><span class="icon" aria-hidden="true"></span></button>
                <div class="accordion-content">
                  <p>Answer2</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="containerFAQ">
            <div class="accordion">
              <div class="accordion-item">
                <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Question3?</span><span class="icon" aria-hidden="true"></span></button>
                <div class="accordion-content">
                  <p>Answer3</p>
                </div>
              </div>
              <div class="accordion-item">
                <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Question4?</span><span class="icon" aria-hidden="true"></span></button>
                <div class="accordion-content">
                  <p>Answer4</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="containerFAQ">
            <div class="accordion">
              <div class="accordion-item">
                <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Question5?</span><span class="icon" aria-hidden="true"></span></button>
                <div class="accordion-content">
                  <p>Answer5</p>
                </div>
              </div>
              <div class="accordion-item">
                <button id="accordion-button-6" aria-expanded="false"><span class="accordion-title">Question6?</span><span class="icon" aria-hidden="true"></span></button>
                <div class="accordion-content">
                  <p>Answer6</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </section>

</body>

<script src="switch.js" charset="utf-8"></script>

</html>

标签： javascripthtmlcsshref

解决方案

选择问题时，您似乎需要激活轮播的相关“面板”。

因此，如果我们在包含问题 1 和 2 的“面板 1”上，并且您从搜索栏中选择“问题 3”，则需要将面板 2 设为“活动”（通过活动类），然后执行您目前正在专注于问题 3

推荐阅读