0

我给了我的每个 div 容器一个唯一的 id 和一些 javascript。所以我可以单击显示/隐藏我正在查看的页面上的每个食谱，但我想在打开新的 div 时通过 JavaScript 关闭任何已经打开的 div。我已经包含了一些提取的代码，而不是粘贴整个文档，因为它很大，下面也是实时网址：

*update -<?=$counter_recipes;?>只是产生一个唯一的数字。$i++ 方法以及页面上方的所有内容。

直播网址 - http://bit.ly/1hQuzRI

    <h3 class="box2-title"><?php echo $row_rsCatalogue['pageTitle']; ?></h3>
<a style="color:#000" class="show_hide<?=$counter_recipes;?>">Show/hide</a>

<script type="text/javascript">
$(document).ready(function(){
$("#box_to_show<?=$counter_recipes;?>").hide();
$(".show_hide<?=$counter_recipes;?>").show();

$('.show_hide<?=$counter_recipes;?>').on('click',function(){
$("#box_to_show<?=$counter_recipes;?>").slideToggle();
});

});
</script>
<div class="box2-content" id="box_to_show<?=$counter_recipes;?>">
    <p><?php echo $row_rsCatalogue['pageSubTitle']; ?></p>
    <?php
        if ($row_rsCatalogue['pageId']){
            $rsPriceMatrix = $db->select('pageOption',array('pageId'=>$db->mes($row_rsCatalogue['pageId'])),array('sort'=>'ASC','name'=>'ASC'));
            $ingredients = '';
            while ($row_rsPriceMatrix = $rsPriceMatrix->get_row_assoc()){ 
                $ingredients .= $row_rsPriceMatrix['name'].', ';
            }
            $ingredients = rtrim($ingredients,', ');
            echo '<p>'.$ingredients.'</p>';
        }

    ?>

如果需要，我可以粘贴更多。

4

1 回答 1

3

根据您的代码：

$('.show_hide<?=$counter_recipes;?>').on('click',function(){
    //Hide open divs!
    $("[id^=box_to_show]:visible").slideUp();

    //slide down
    $("#box_to_show<?=$counter_recipes;?>").slideToggle();
});

一个更简单的方法是为您的 div 提供一个打开和关闭的公共类，然后$(".someClass:visible").slideUp();在函数的开头调用。

于 2013-11-07T20:50:49.953 回答