Question

我已经使用twitter bootstrap创建了一个包含可折叠部分的帮助页面。这是一个最小的代码示例：

<div class="accordion" id="accordion2">

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Sample heading one
    </a>
  </h4>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph one</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Sample heading two
    </a>
  </h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph two</p>
  </div>
</div>  

</div>

而不是设置数据库，索引页面，添加搜索框以及创建搜索结果页面;我想允许用户使用＆＃34; find＆＃34;功能类似于＆＃34;发现＆＃34;浏览器附带的功能，即输入单词，找到匹配的单词，然后在单击时移动到下一个单词。

由于我的页面充满了可折叠的部分，我希望该部分可以在find上进行扩展。所以我的问题是如何才能执行＆＃34;发现＆＃34;在具有可折叠部分的单个HTML页面上运行？

Answer 1

这可能是一个程序化的锤子，但它应该做的伎俩：

jsFiddle上的完全注释代码，如果它不清楚发生了什么

$('#find').click(function(){
    var btn = $(this);
    btn.prop("disabled",true); 
    var term = $('#term').val(); 
    $('.collapse').collapse("hide"); 
    var rd = new RegExp('<span class="found">('+term+')<\/span>', "ig");
    $('#accordion2').html( $('#accordion2').html().replace(rd, '$1' ) ); 
    var occurences=[]; 
    $('#accordion2 .panel-body').each(function(i,e){ 
        var r = new RegExp('('+term+')', "ig"); 
        if( $(this).html().match(r) ){ 
            var matches = $(this).html().match(r); 
            $.each(matches, function(){ 
                occurences.push(i); 
            });
            $(this).html( $(this).html().replace(r, '<span class="found">$1</span>') );  
        }
    });
    var l =occurences.length; 
    var c = Number( $('#current').html() ); 
        c =  c > 0 ? c+1: 0;  
        c =  c > l ? 1 : c; 
        c =  c == 0 && l > 0 ? 1 : c ; 
    $('#count').html( l > 0 ? ' of '+ l : ' matches found in document');  
    $('#current').html( c ); 
    if(c != 0){
        $('#accordion2 .accordion-toggle').eq( occurences[c-1] ).click(); 
        $('.found').eq(c-1).focus();
    }
    setTimeout(function() { btn.prop("disabled",false); }, 1000); 
});

// reset everything if the user starts typing again
$('#term').keydown(function(){
    var term = $('#term').val(); 
    var rd = new RegExp('<span class="found">('+term+')<\/span>', "ig"); 
    $('#accordion2').html( $('#accordion2').html().replace(rd, '$1' ) ); 
    $('#count').html(''); // reset our labels
    $('#current').html('');
});

.found{
  background-color:yellow;
}
span{
    margin-left:15px;
    font-size:16px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<input type="text" id="term" value="cool" placeholder="search.."/><input type="button" id="find" value="Find"/><div id="labels"><span id="current"></span><span id="count"></span></div>
<div class="accordion" id="accordion2">

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Sample heading one
    </a>
  </h4>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph one</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Sample heading two
    </a>
  </h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph two</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
      Sample heading three
    </a>
  </h4>
</div>
<div id="collapseThree" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph one</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
      Sample heading four
    </a>
  </h4>
</div>
<div id="collapseFour" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph two cool</p>
  </div>
</div>  
    
</div>

Answer 2

如果可以使用jquery，则可以使用:contains(my_string)伪选择器。以下是此示例：http://jsfiddle.net/911d1zwk/

$("button").on("click", function(){
    var search = $("input").val();
    $("div.collapse").find(":contains('"+search+"')").parent().collapse("show");
});

这将获取您的搜索字符串并查找它存在的可折叠div。这可以是多个div。然后它会在正确的手风琴上触发Bootstrap的“扩展”方法。希望这有帮助！

Answer 3

您可以尝试在bootstrap中使用collapse（）函数来隐藏和显示手风琴。这是一个有效的例子。

 $(document).ready(function(){
 $('a.searchContent').on('click', function(){
	var q = $('input#input_search').val();
	searchFunction(q.toLowerCase());
 });
 });
 
   function searchFunction(s){
		console.log(s);
	$('.collapse').each(function(){
	  var divText = $(this).text();
	  console.log(divText.toLowerCase(), s);
	  if(divText.toLowerCase().indexOf(s) > -1){
		$(this).collapse('show'); 
	  }
	  if(divText.toLowerCase().indexOf(s) < -1){
		$(this).collapse('hide'); 
	  }
	});
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion2">

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Sample heading one 
    </a>
  </h4>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph one, Abc, xyz</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Sample heading two
    </a>
  </h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph two, def, wxy</p>
  </div>
</div>  

</div>

<div><input type="text" name="search" id="input_search" /><br>
<a href="#" class="searchContent">Search!</a>
</div>

我怎样才能执行＆＃34;发现＆＃34;在具有可折叠部分的单个HTML页面上运行？

3 个答案:

jsFiddle上的完全注释代码，如果它不清楚发生了什么