Django移动端理发服务网站：点击理发师仅显示对应预订日历问题

你的问题核心出在JavaScript选择器的范围上——当前代码点击任意.content_box时，会选中页面上所有的.booking-div并切换open类，所以才会出现所有日历同时显示/隐藏的情况。我们只需要调整JS逻辑，让点击事件只作用于当前卡片对应的那个预订容器，同时关闭其他已打开的日历即可。

步骤1：调整HTML结构（建立卡片与日历的关联） #

先把每个理发师的.booking-div和.content_box放在同一个父容器里，这样我们可以通过DOM的相对关系快速定位到对应的元素：

<div class="viewport_content">
    {% for BarberProfile in queryset_list %}
        <!-- 新增父容器包裹每个理发师的日历和卡片 -->
        <div class="barber-item">
            <div class="booking-div">
                <iframe class="booking-system" src="{{BarberProfile.booking_link}}" frameBorder="0"></iframe>
                <script src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js" type="text/javascript"></script>
            </div>
            <a class="content_box">
                <div class="image_box" style="background-image: url({{BarberProfile.image.url}})"></div>
                <div>
                    <h4 class="barber_name">{{BarberProfile.first_name}}</h4>
                    <p class="barber_bio">{{BarberProfile.bio}}</p>
                </div>
            </a>
        </div>
    {% endfor %}
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="{% static "js/booking.js" %}"></script>

步骤2：修改JavaScript逻辑（精准控制对应日历） #

更新booking.js，当点击.content_box时：

• 定位当前卡片所在的父容器
• 在父容器内找到对应的预订日历，切换它的显示状态
• 关闭其他所有已打开的日历，确保同一时间只有一个日历显示

$(document).ready(function(){
    $(".content_box").on("click", function(){
        // 获取当前点击卡片的父容器
        const parentItem = $(this).closest(".barber-item");
        // 获取当前卡片对应的预订日历
        const targetBookingDiv = parentItem.find(".booking-div");
        
        // 先关闭所有其他已打开的日历
        $(".booking-div").not(targetBookingDiv).removeClass("open");
        // 切换当前日历的显示/隐藏状态
        targetBookingDiv.toggleClass("open");
    });
});

额外优化：点击空白处关闭日历（可选） #

如果需要点击日历以外的区域自动关闭它，可以在JS里添加这段逻辑：

$(document).on("click", function(event){
    // 判断点击区域既不是日历容器，也不是理发师卡片
    if (!$(event.target).closest(".booking-div").length && !$(event.target).closest(".content_box").length) {
        $(".booking-div").removeClass("open");
    }
});

为什么不需要修改Django视图或CSS？ #

• Django视图已经正确传递了所有理发师的数据，无需调整
• CSS的.open类已经完美控制了日历的显示/隐藏逻辑，只需要JS精准触发即可

这样修改后，点击某个理发师卡片时，只会打开对应的预订日历，其他日历会保持隐藏状态，完全解决你的问题。

内容的提问来源于stack exchange，提问作者Will Dpard