Question

我有我想要工作的开始，但我担心我不会以我的思路走向干燥的道路。

现在，如果你点击以下任何一个div，它将隐藏或显示下面所有标题旁边的图标复选标记。

我只想在点击特定div时向页面下方的相关标题显示图标复选标记。

我的方法应该采用什么方法？我的方式似乎在路上没有意义。感谢您的关注和感谢您一起来看看。

<div class="row container">
  <div class="row offset1">
    <div class="span3 frustrate_topside">  
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
    <div class="span3 frustrate_topside">
        <div>
          <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
        </div>
    </div>
    <div class="span3 frustrate_topside">
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
  </div>
</div>

<div class="offset2 span6" id='container'>
  <h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>  
  <div class='content'>trouble</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
  <div class='content'> 80% completion rate.</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
  <div class='content'>joke on me</div> 
</div>

<script>  
$('div.frustrate_topside').click(function(){
  $('i').toggle();
});
</script>

Answer 1

这是一个有用的JS小提琴，用于满足您的要求：http://jsfiddle.net/sTve6/1/ 我没有使用图标/图像设置您的文件，因此我为每个图标使用了“o”的占位符文本，并假设您的图标开始隐藏。

HTML：

<div class="row container">
  <div class="row offset1">
    <div class="span3 frustrate_topside" for='q1'>  
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
    <div class="span3 frustrate_topside" for='q2'>
        <div>
          <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
        </div>
    </div>
    <div class="span3 frustrate_topside" for='q3'>
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
  </div>
</div>

<div class="offset2 span6" id='container'>
  <h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>  
  <div class='content'>trouble</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
  <div class='content'> 80% completion rate.</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
  <div class='content'>joke on me</div> 
</div>

CSS：

.icon-ok 
{
 display:none;   
}

JS：

$('div.frustrate_topside').click(function(){
    var elt = $(this).attr('for');
    $("#" + elt).toggle();
});

JQuery切换元素基于另一个div的点击

1 个答案: