手风琴和搜索栏是行不通的

时间：2018-10-19 18:28:01

标签： javascript html css

所以我在手风琴方面遇到了一些重大问题。在此示例中，我有三（3）个手风琴的两个部分。实际版本有6个部分。但是，我试图制作一个搜索栏，当您在其中搜索时，将显示与搜索相匹配的手风琴，其余的将隐藏。我不知道如何在此站点上发布代码，因为我对此很陌生，但是通过我的代码，我设法搜索并使其与第一手风琴一起工作。但只有第一个。它不会在其他部分中隐藏手风琴，这真是令人讨厌：/另外，我将其设置为在按下Enter键时进行搜索。有谁知道我写的时候如何搜索它，所以我不需要按回车键？非常感谢！非常感谢！ ：D 

$("#myInput").on("keydown", function mySearch(e) {
        if (e.keyCode == 13) {
            var text = $(this).val().toLowerCase();

            var parent = document.getElementById('accordion');

            for (i = 0; i < parent.children.length; i++) {
                var title = parent.children[i].children[0].children[0].children[0].textContent.toLowerCase();

                if (title.includes(text) === true) {
                    parent.children[i].setAttribute('style', 'display: block;');
                } else {
                    parent.children[i].setAttribute('style', 'display: none;');
                }
            }
        }
    });
  input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    position: absolute;
    right: 6%;
}

input[type=text]:focus {
    width: 25%;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<body>

<br><br>
<input type="text" id="myInput" placeholder="Søk..">

<div class="container">
  <h2>Accordion Example</h2>
  
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Test 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Test 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Test 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>


<br><br><br>
<h1>This be a test</h1>
<br>

<div class="container">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Test 4</a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Test 5</a>
        </h4>
      </div>
      <div id="collapse5" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Test 6</a>
        </h4>
      </div>
      <div id="collapse6" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>

</body>

2 个答案:

答案 0 :(得分：0)

getElementById仅查询一次，并且您在代码中两次使用id =“ accordion”。

您应该将它们替换为一个类，并改用getElementsByClassName方法。您可能也应该改变孩子的逻辑……

答案 1 :(得分：0)

您可以通过使用jquery每个循环来过滤它。您不需要额外的代码。

看看片段。

volumes
$("#myInput").on("keyup", function mySearch(e) {
            var text = $(this).val().toLowerCase();
            $(".panel a").each(function(){
              if($(this).text().toLowerCase().includes(text)){
                $(this).parents(".panel").show();
              }else{
                $(this).parents(".panel").hide();
              }
            });
    });
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    position: absolute;
    right: 6%;
}

input[type=text]:focus {
    width: 25%;
}

更新1：

自动搜索文字。

相关问题
最新问题