如何在點擊表格中的按鈕時使用toggleClass顯示的表格保持打開狀態？

Question

在我的數據庫中，我有一個product_category表，每個產品類別下的產品表中的產品。我動態地調出按鈕中的每個產品類別，每個產品都在其特定產品類別下的HTML表格上。每個表首先隱藏起來，因爲類'hide'，但是通過jQuery的toggleClass，當它們點擊特定的產品類別按鈕時，它會顯示出來。但每張桌子都有按鈕，可以打開一個模式，每當我點擊任何我想要的產品類別下的特定產品表格以保持打開狀態。 +即使我點擊區域內或桌面上的空間，甚至不點擊按鈕，它也會關閉。我怎樣才能限制它只是產品類別按鈕。

product category buttons on a fresh page load

product displayed when a product category is clicked

 <?php 

    global $number; 
    global $store_key; 
    global $product_set; 
    global $products; 
    global $query; 
    global $category; 

    $store_key = $_SESSION['store_key']; 
    //$branch_code = $_GET['branch_code'];  
     $query = "SELECT category_key FROM product_category WHERE store_key = '{$store_key}' ORDER BY category_name ASC"; 
     $category_set = mysql_query($query); 
     if(!$category_set) 
        { 
     die("Database query failed: " . mysql_error().", ".$query); 
        } 

     while($category = mysql_fetch_array($category_set)){ 
     ?> 

    <ol id="chaps"> 
    <li><button class="button button-3d button-leaf" ><?php echo ucfirst(get_category($category['category_key']));?></button> 

     <table id="datatable1" class="table table-striped table-bordered assignments hide" cellspacing="0" width="100%"> 
    <caption>Product Details</caption> 
    <thead> 
    <tr> 
      <th>#</th> 
      <th>Product Name</th> 
      <th>Total Pieces</th> 
      <?php 
     if($_SESSION['store_key'] == $_SESSION['user_id']){ 
      echo "<th>Action</th>"; 
     }else{ 
      echo ""; 
     } 
     ?> 
     </tr> 
    </thead> 

     <tfoot> 
    <tr> 
     <th>#</th> 
      <th>Product Name</th> 
      <th>Total Pieces</th> 
      <?php 
     if($_SESSION['store_key'] == $_SESSION['user_id']){ 
      echo "<th>Action</th>"; 
     }else{ 
      echo ""; 
     } 
     ?> 
    </tr> 
    </tfoot> 
    <tbody> 





     <?php 

    global $number; 
    global $store_key; 
    global $product_set; 
    global $products; 
    global $query; 

    $store_key = $_SESSION['store_key']; 
    //$branch_code = $_GET['branch_code'];  
    if($_SESSION['store_key'] == $_SESSION['user_id']){ 
     $query = "SELECT DISTINCT product_key,product_name FROM products WHERE store_key = '{$store_key}' AND category_key = '{$category['category_key']}' ORDER BY branch_code,product_name ASC"; 
     $product_set = mysql_query($query); 
     if(!$product_set) 
        { 
    die("Database query failed: " . mysql_error().", ".$query); 
       } 
}else{ 
    $query = "SELECT DISTINCT product_key,product_name FROM products WHERE store_key = '{$store_key}' AND branch_code = '{$_SESSION['branch_code']}' AND category_key = '{$category['category_key']}' ORDER BY branch_code,product_name ASC"; 
    $product_set = mysql_query($query); 
    if(!$product_set) 
       { 
    die("Database query failed: " . mysql_error().", ".$query); 
       } 
} 




    $number = mysql_num_rows($product_set); 


    for($count=1;$count<=$number;$count++){ 
?> 
<tr> 
    <?php $products = mysql_fetch_array($product_set); ?> 
     <?php echo "<td>{$count}</td>"; ?> 
    <?php echo "<td>".ucwords($products['product_name'])."</td>"; ?> 
     <?php 
     if($_SESSION['store_key'] == $_SESSION['user_id']){ 
     echo "<td>".get_productPieces($products['product_key'])."</td>"; 
     }else{ 
     echo "<td>".get_branchPieces($products['product_key'])."</td>"; 
     } 

     ?> 

    <?php 
     if($_SESSION['store_key'] == $_SESSION['user_id']){ 
     echo "<td width='20px'> 
      <a class='btn btn-warning btn-sm' id='branch' data-toggle=\"modal\" data-target='#add_branchProductModal' href='modals/add_branchProductModal.php?id3={$_SESSION['store_key']}' role='button'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></a>";?> 
     <!--<a class='btn btn-danger btn-sm' href='productdelete.php' role='button'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></a>--> 
      </td> 
      <?php 
     }else{ 
      echo ""; 
     } 
      ?> 
</tr> 
<?php 
} 
?> 

    </tbody> 
     </table> 


    </li> 
</ol> 

而我的jQuery之前，我發現我的問題

<script> 
$("#chaps > li").click(function() { 
    $(this).find("table.assignments").toggleClass('hide'); 

}); 

          </script> 

那麼一個我試圖落實解決了這個問題，它必須是蹩腳奏效因爲我仍然在學習jquery

<script> 
    if($("#chaps > li").click()){ 
    $(this).find("table.assignments").toggleClass('hide'); 
    return true; 
    }else if($("#branch").click()){ 
    $(this).find("table.assignments").toggleClass('hide'); 
    return false; 
    } 
          </script> 

Answer 1

嘗試將點擊事件處理程序綁定到按鈕而不是列表項。由於整個表格都包含在li標籤中，因此只要點擊該標籤內的任何內容，就會觸發處理程序。看看這個工程：

<script> 
    if($("#chaps > li > button.button-leaf").click()){ 
    $(this).find("table.assignments").toggleClass('hide'); 
    return true; 
}else if($("#branch").click()){ 
$(this).find("table.assignments").toggleClass('hide'); 
return false; 
} 
</script> 

編輯： 在這種情況下，試試這個：

$('#chaps li').each(function() { 
     $(this).find('button.button-leaf').on('click',function(){ 
      $(this).parents('li').find('table.assignments').toggleClass('hide'); 
      return false; 
    }); 
}); 

$('#branch').on('click', function(){ 
    $(this).parents('table.assignments').toggleClass('hide'); 
}); 

我做了一個類似的測試例子來嘗試一下：https://jsfiddle.net/zstj2nyn/所以它應該是工作