jQuery .click功能

Question

我目前有4个按钮的jQuery代码。基本上，你点击按钮，它会加载该区域的内容ID。

该代码是

$("#theIntroduction, #theGoogleFeed, #theTwitterFeed, #theQuote, #contactUs").click(function() 
{ 
    var container = $(this).attr('id') 
    $(theCurrentPageHeader).hide(); 
    $('#'+container+'Content').show(); 
    theCurrentPageHeader = $('#'+container+'Content') 
    return false; 
}); 

我已经添加了ID “close_btn” 的按钮。我想要做的是点击该按钮，然后关闭内容区域。

我一直在玩.hide和.show，但问题是一旦这个被点击，它要么完全隐藏内容，要么显示下一个块在另一个下面的块。

这是我有什么...

 $("#close_btn").click(function() 
{ 
    $("#theIntroductionContent").show(); 
    $("#askMeAQuestion").hide(); 
}); 

的HTML标记，它有违如下：

<div class="row <?php echo $personsImage ?>"> 
     <div class="span10"> 

      <h1 class="large primary" style="line-height:12px; margin-top:15px; margin-bottom:17px; margin-left:10px;"><?php 
      $pageTitle = get_the_title(); 
      if ($pageTitle == 'Personal') 
      { 
       echo 'Personal legal services'; 
      }else{ 
       echo $pageTitle; 
      }; 

      ?></h1> 
      <hr class="light" style="height:1px; margin-left:10px;" /> 
      <hr class="space" /> 
      <div id="theIntroductionContent" class="personInformationClass " style="display:none;"><div class="social introduction" style="float:left; padding:10px;"></div><p class="" style="line-height:24px; margin:0 60px;"><?php echo get_the_excerpt(); ?></p></div> 
      <div id="theGoogleFeedContent" class="personInformationClass" style="display:none;"><div class="social google" style="float:left; padding:10px;"></div><p class="medium" style="line-height:24px;"><?php echo $googleNews ?></p></div> 
      <div id="theTwitterFeedContent" class="personInformationClass" style="display:none;"><div class="social twitter_sub" style="float:left; padding:10px;"></div><p class="medium" style="line-height:24px;"><?php echo $twitterName ?></p></div> 
      <div id="theQuoteContent" class="personInformationClass" style="display:none;"><div class="social quote" style="float:left; padding:10px;"></div><p class="medium" style="line-height:24px;"><?php echo $peopleDetails[3] ?></p></div> 
      <div id="contactUsContent" class="personInformationClass" style="display:none;"> 
       <?php get_template_part('askMeAQuestion','index') ?> 
      </div> 

     </div> 

     <div class="span6"> 

      <?php 

      echo '<h1 class="large primary" style="line-height:12px; margin-top:15px; margin-bottom:17px;"><a href="'.$tempLink.'/people/'.$personsPermalink.'/" class="primary">' . $peopleDetails[0] . '</a></h1>'; 
      echo '<hr class="light" style="width:82%; height:1px; float:left; " />'; 
      echo '<p class="PersonTextClass"><!--strong>'.$peopleDetails[1].'</strong--></p>'; 
      echo'<p class="PersonTextClass small">Click the icons below to see whats going on and what we are talking about.</p><hr class="space" />'; 
      echo '<ul class="person_social_links">'; 
      echo '<li><a title=""class="social introduction" id="theIntroduction">Tilly Bailey & Irvine page introduction</a></li>'; 
      echo '<li><a title="Google News: '.$googleAlertsKeyword.'"class="social google" id="theGoogleFeed">Google alert</a></li>'; 

      if (trim($peopleDetails[4]) === "null") 
      { 

      }else{ 
      echo '<li><a title="Follow me on Twitter" class="social twitter_sub" id="theTwitterFeed">follow me on twitter</a></li>'; 
      } 
      echo '<li><a title="Hi im '.$peopleDetails[0] .'" class="social quote" id="theQuote">my quote</a></li>'; 
      echo '</ul>'; 
      echo '<hr class="space" /><hr class="space" /><hr class="space" />'; 
      echo '<a class="medium footer_linkBox block askBtn" id="contactUs" style="color:#fff;">Ask '.$peopleDetails[0].'</a>'; 

?> 


     </div> 
    </div> 

有什么办法，我可以纳入#close_btn字面上关闭它驻留的盒子并转到前一个盒子。或默认页面加载它是#theIntroduction

Answer 1

你可以尝试这样的事：

$("#close_btn").click(function() { 

    $("#theIntroduction").trigger("click"); 

}); 

即在关闭按钮的点击触发的介绍链接的点击则应该执行你的第一个功能（如果我正确阅读它将做隐藏和展示给你）...

Answer 2

我觉得这个问题有点难以理解。也许你可以用jsFiddle来证明你的问题。

当我看到您的源代码时，我的想法是，如果您添加新的导航项目会发生什么。也许你可以做更通用的事情。

<ul> 
    <li class="navigationItem">Introduction</li> 
    <li class="navigationItem">Google feed</li> 
    etc. 
</ul> 

$('.navigationItem').click(function() {}) 

或

<ul id="navigation"> 
    <li>Introduction</li> 
    <li>Google feed</li> 
    etc. 
</ul> 

$('#navigation > li').click(function() {})