如何在二次点击产品项时隐藏倒三角箭头？

嘿，我看了你的问题和代码，核心问题是再次点击产品项隐藏对应区块时，.arrow-down箭头没跟着消失。你加的隐藏代码没生效，大概率是逻辑绑定不严谨或者选择器/判断条件的问题，我给你几个可行的解决思路：

1. 先确保箭头与区块状态完全同步 #

你原来的代码只在隐藏区块时加了箭头隐藏，但可能没在显示区块时主动恢复箭头显示，或者判断条件存在偏差。修改后的jQuery代码如下：

$("#franchisehub").click(function() {
    const $targetBlock = $('.franchisehubtv');
    // 如果页面有多个箭头，给当前箭头加专属类（比如.fr-hub-arrow），避免影响其他箭头
    const $arrow = $('.arrow-down');
    
    if ($targetBlock.css('display') === "flex") {
        // 隐藏区块和箭头
        $targetBlock.css('display', 'none');
        $arrow.css('display', 'none');
    } else {
        // 重置其他产品样式（保留你的原有逻辑，可参考后面的优化写法）
        $('#cloudbasedmobile, #businessanalytics, #techsupport, #ordermanagement, #employeemanagement, #whitelabel, #emailmarketing, #royaltycalculator, #customizationtools, #goalsetting, #custominvoicing, #leadtracking, #brandcontrol').css({
            'background-color': 'white',
            'color': '#222222'
        });
        // 设置当前产品样式
        $(this).css({
            'background-color': 'green',
            'color': 'white'
        });
        // 隐藏其他内容区块
        $('.cloudbasedtextipad, .business-analytics, .tech-support, .order-management, .employee-management, .white-label, .brand-control, .lead-tracking, .custom-invoicing, .goal-setting, .customization-tools, .royalty-calculator, .email-marketing').css('display', 'none');
        // 显示当前区块和箭头
        $targetBlock.css('display', 'flex');
        $arrow.css('display', 'block'); // 与箭头默认display值一致，你的CSS中默认是block
    }
});

2. 用CSS类替代直接操作display（更优雅可靠） #

直接修改display容易受浏览器返回值差异、其他CSS覆盖影响，用类控制更稳妥：

首先定义通用隐藏类：

.hidden {
    display: none !important;
}

然后优化jQuery逻辑：

$("#franchisehub").click(function() {
    const $targetBlock = $('.franchisehubtv');
    const $arrow = $('.arrow-down'); // 多箭头场景用专属选择器

    if ($targetBlock.is(':visible')) {
        // 隐藏状态：添加隐藏类
        $targetBlock.addClass('hidden');
        $arrow.addClass('hidden');
    } else {
        // 优化：给所有产品项加共同类.product-item，一行重置样式
        $('.product-item').css({
            'background-color': 'white',
            'color': '#222222'
        });
        // 设置当前产品样式
        $(this).css({
            'background-color': 'green',
            'color': 'white'
        });
        // 优化：给所有内容区块加共同类.product-content，一行隐藏所有
        $('.product-content').addClass('hidden');
        // 显示当前区块和箭头
        $targetBlock.removeClass('hidden');
        $arrow.removeClass('hidden');
    }
});

这里用:visible判断元素可见性，比读取css('display')更靠谱，不管区块是flex还是block都能正确识别。

3. 优化冗余代码（可选但推荐） #

你当前重置样式的代码重复过多，给元素加共同类能大幅简化：

<!-- 给所有产品项加共同类 -->
<div id="franchisehub" class="product-item">...</div>
<div id="cloudbasedmobile" class="product-item">...</div>

<!-- 给所有内容区块加共同类 -->
<div class="franchisehubtv product-content">...</div>
<div class="cloudbasedtextipad product-content">...</div>

之后JS里只需两行就能完成批量重置和隐藏，避免漏写且更易维护。

为什么你原来的代码没生效？ #

大概率是这两个原因之一：

• if条件判断没命中：浏览器返回的display值可能带空格或其他格式（比如"flex "），导致=== "flex"不成立，箭头隐藏代码没执行，用:visible可避免这个问题。
• 选择器范围错误：如果页面有多个.arrow-down，全局选择器会操作所有箭头，导致目标箭头没被正确控制，加专属类即可解决。

先试试第一种方案，检查箭头选择器是否精准，再用第二种方案的类方式优化，肯定能解决问题～

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