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() {})