2

我有我想要工作的开始，但恐怕我的思路并没有走上一条干燥的道路。

现在，如果您单击下面的任何 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>
4

1 回答 1

2

这是你所要求的一个有效的 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();
});​
于 2012-12-31T23:57:37.767 回答