堆栈内存溢出
  繁体   English   中英

如何在单击图像时隐藏倒三角形？

[英]How to hide an inverted triangle with on click of an image?

 原文  2018-05-31 17:21:13  3   3    javascript/ jquery/ html/ css

问题描述

我有一个小提琴 ，我希望在第二次尝试单击图像时隐藏倒三角形 。

小提琴的工作方式是，单击单个产品行项目后，该方框也将在底部带有箭头显示。

在此处输入图片说明

我用于倒三角形的HTML和CSS代码（在上面的屏幕快照中标记）是：

HTML： 

<div class="arrow-down"></div>

CSS： 

.arrow-down {
  width: 0; 
  height: 0;
  margin: auto;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #f0f0f0;
}


我在小提琴中使用的jquery代码片段为： 

$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');


  } else {
    $('#franchisehub').css('background-color', 'green');
    $('#franchisehub p').css('color', 'white');     

    $('#cloudbasedmobile').css('background-color', 'white');    
    $('#cloudbasedmobile p').css('color', '#222222');    

    $('#businessanalytics').css('background-color', 'white');   
    $('#businessanalytics p').css('color', '#222222');   


    $('#techsupport').css('background-color', 'white'); 
    $('#techsupport p').css('color', '#222222');    


    $('#ordermanagement').css('background-color', 'white');  
    $('#ordermanagement p').css('color', '#222222');  


    $('#employeemanagement').css('background-color', 'white'); 
    $('#employeemanagement p').css('color', '#222222'); 


    $('#whitelabel').css('background-color', 'white');
    $('#whitelabel p').css('color', '#222222');

    $('#emailmarketing').css('background-color', 'white');   
    $('#emailmarketing p').css('color', '#222222');  

    $('#royaltycalculator').css('background-color', 'white');  
    $('#royaltycalculator p').css('color', '#222222');

    $('#customizationtools').css('background-color', 'white');
    $('#customizationtools p').css('color', '#222222');

    $('#goalsetting').css('background-color', 'white'); 
   $('#goalsetting p').css('color', '#222222');     

    $('#custominvoicing').css('background-color', 'white'); 
    $('#custominvoicing p').css('color', '#222222'); 

    $('#leadtracking').css('background-color', 'white');
    $('#leadtracking p').css('color', '#222222');

    $('#brandcontrol').css('background-color', 'white');  
    $('#brandcontrol p').css('color', '#222222');   


    $('.franchisehubtv').css('display', 'flex'); 
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
  }

});


问题陈述：

如上所述，在小提琴中有两行带有产品项。 单击单个产品项时，该框也会在底部显示，同时带有箭头，如果我再次单击该产品项，该框将被隐藏。 我要完成的是在第二次单击产品项时也要隐藏箭头。

在上述if logic的Jquery代码片段中，我提到了$('.arrow-down').css('display', 'none'); 但它似乎不起作用。

3 个解决方案

解决方案1
 2 已采纳  2018-05-31 17:44:40

我必须删除一些HTML和JS才能使代码片段正常工作。 您的代码达到了SO的最大值。

首先，我建议您编写一个更具模块化的代码。 干-不要重复自己。 我添加了函数resetAll()以便您可以看到可以完成的操作。 同样在该功能中，我将箭头标记为block 。

稍后在每个听众上，我添加了display: none根据您的if条件， display: none 。

只有AAA和BBB起作用

希望这会有所帮助：> 

 (function($) { // IIFE to enable `$` as jQuery $(function() { // document ready $("#franchisehub").click(function() { if ($('.franchisehubtv').css('display') == "flex") { $('.arrow-down').css('display', 'none'); $('.franchisehubtv').css('display', 'none'); } else { resetAll(); $('#franchisehub').css('background-color', 'green'); $('#franchisehub p').css('color', 'white'); $('.franchisehubtv').css('display', 'flex'); } }); $("#cloudbasedmobile").click(function() { if ($('.cloudbasedtextipad').css('display') == "flex") { $('.cloudbasedtextipad').css('display', 'none'); $('.arrow-down').css('display', 'none'); } else { resetAll(); $('#cloudbasedmobile').css('background-color', 'green'); $('#cloudbasedmobile p').css('color', 'white'); $('.cloudbasedtextipad').css('display', 'flex'); } }); function resetAll() { $('#franchisehub').css('background-color', 'white'); $('#franchisehub p').css('color', '#222222'); $('#cloudbasedmobile').css('background-color', 'white'); $('#cloudbasedmobile p').css('color', '#222222'); $('#businessanalytics').css('background-color', 'white'); $('#businessanalytics p').css('color', '#222222'); $('#techsupport').css('background-color', 'white'); $('#techsupport p').css('color', '#222222'); $('#ordermanagement').css('background-color', 'white'); $('#ordermanagement p').css('color', '#222222'); $('#employeemanagement').css('background-color', 'white'); $('#employeemanagement p').css('color', '#222222'); $('#whitelabel').css('background-color', 'white'); $('#whitelabel p').css('color', '#222222'); $('#emailmarketing').css('background-color', 'white'); $('#emailmarketing p').css('color', '#222222'); $('#royaltycalculator').css('background-color', 'white'); $('#royaltycalculator p').css('color', '#222222'); $('#customizationtools').css('background-color', 'white'); $('#customizationtools p').css('color', '#222222'); $('#goalsetting').css('background-color', 'white'); $('#goalsetting p').css('color', '#222222'); $('#custominvoicing').css('background-color', 'white'); $('#custominvoicing p').css('color', '#222222'); $('#leadtracking').css('background-color', 'white'); $('#leadtracking p').css('color', '#222222'); $('#brandcontrol').css('background-color', 'white'); $('#brandcontrol p').css('color', '#222222'); $('.franchisehubtv').css('display', 'none'); $('.cloudbasedtextipad').css('display', 'none'); $('.business-analytics').css('display', 'none'); $('.tech-support').css('display', 'none'); $('.order-management').css('display', 'none'); $('.employee-management').css('display', 'none'); $('.white-label').css('display', 'none'); $('.brand-control').css('display', 'none'); $('.lead-tracking').css('display', 'none'); $('.custom-invoicing').css('display', 'none'); $('.goal-setting').css('display', 'none'); $('.customization-tools').css('display', 'none'); $('.royalty-calculator').css('display', 'none'); $('.email-marketing').css('display', 'none'); $('.arrow-down').css('display', 'block'); } }) })(jQuery) 
 .product-all-contents { background-color: #f0f0f0; } .product-contents { margin-left: 15%; margin-right: 15%; display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .product-contents .product { width: 10%; text-align: center; height: 150px; padding-top: 1%; padding-left: 1%; padding-right: 1%; border-style: solid; border-width: 3px; border-color: rgb(145, 147, 150); background-color: white; border-radius: 10px } .product-contents .product #franchise-hub { margin-bottom: 22%; } .product-contents .product #cloud-based-mobile { margin-bottom: 30%; } .product-contents .product #business-analytics { margin-bottom: 28%; } .product-contents .product #tech-support { margin-bottom: 27%; } .product-contents .product #order-management { margin-bottom: 27%; } .product-contents .product #employee-management { margin-bottom: 18%; } .product-contents .product #white-label { margin-bottom: 15%; } .product-contents .product #brand-control { margin-bottom: 20%; } .product-contents .product #lead-tracking { margin-bottom: 28%; } .product-contents .product #custom-invoicing { margin-bottom: 27%; } .product-contents .product #goal-setting { margin-bottom: 26%; } .product-contents .product #customization-tools { margin-bottom: 27%; } .product-contents .product #royalty-calculator { margin-bottom: 27%; } .product-contents .product #email-marketing { margin-bottom: 24%; } .ipads { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .tvs { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .cloud-based-text { width: 50%; } div.cloudbasedtextipad { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .franchise-hub-text { width: 50%; } div.franchisehubtv { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .business-analytics-text { width: 50%; } div.business-analytics { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .tech-support-text { width: 50%; } div.tech-support { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .order-management-text { width: 50%; } div.order-management { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .employee-management-text { width: 50%; } div.employee-management { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .white-label-text { width: 50%; } div.white-label { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .brand-control-text { width: 50%; } div.brand-control { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .lead-tracking-text { width: 50%; } div.lead-tracking { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .custom-invoicing-text { width: 50%; } div.custom-invoicing { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .goal-setting-text { width: 50%; } div.goal-setting { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .customization-tools-text { width: 50%; } div.customization-tools { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .royalty-calculator-text { width: 50%; } div.royalty-calculator { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .email-marketing-text { width: 50%; } div.email-marketing { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } .product-quotes { display: block; padding: 20px 11px; width: 90%; color: #3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal; } .arrow-down { width: 0; height: 0; margin: auto; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 40px solid #f0f0f0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-all-contents"> <div class="product-contents"> <div class="product" id="franchisehub"> <img id="franchise-hub" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942"> <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; color: rgb(58, 59, 60);">AAA</p> </div> <div class="product" id="cloudbasedmobile" style="background-color:green;"> <img id="cloud-based-mobile" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8042" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; color: rgb(58, 59, 60);">BBB</p> </div> <div class="product" id="businessanalytics"> <img id="business-analytics" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; color: rgb(58, 59, 60);">CCC</p> </div> <div class="product" id="techsupport"> <img id="tech-support" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" /> <p style=" font-size: 15px; font-family: 'Roboto'; margin-right: 9%; line-height: 1.2; margin-left: 9%; color: rgb(58, 59, 60);">DDD</p> </div> <div class="product" id="ordermanagement"> <img id="order-management" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; color: rgb(58, 59, 60);">EEE</p> </div> <div class="product" id="employeemanagement"> <img id="employee-management" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942"> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; margin-left: 5%; color: rgb(58, 59, 60);">FFF</p> </div> <div class="product" id="whitelabel"> <img id="white-label" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942"> <p style=" font-size: 15px; font-family: 'Roboto'; line-height:1.2; margin-left: 14%; margin-right: 14%; color: rgb(58, 59, 60); ">GGG</p> </div> </div> <div class="product-contents"> <div class="product" id="brandcontrol"> <img id="brand-control" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" /> <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 8%; line-height:1.2; margin-right: 8%; color: rgb(58, 59, 60); ">HHH</p> </div> <div class="product" id="leadtracking"> <img id="lead-tracking" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" /> <p style=" font-size: 15px; font-family: 'Roboto'; line-height:1.2; margin-left: 5%; margin-right: 5%; color: rgb(58, 59, 60); ">III</p> </div> <div class="product" id="custominvoicing"> <img id="custom-invoicing" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; color: rgb(58, 59, 60);">JJJ</p> </div> <div class="product" id="goalsetting"> <img id="goal-setting" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" /> <p style="font-size: 15px; font-family: 'Roboto'; margin-right: 13%; margin-left: 13%; line-height: 1.2; color: rgb(58, 59, 60);">KKK</p> </div> <div class="product" id="customizationtools"> <img id="customization-tools" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; color: rgb(58, 59, 60);">LLL</p> </div> <div class="product" id="royaltycalculator"> <img id="royalty-calculator" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; margin-left: 5%; color: rgb(58, 59, 60);">MMM</p> </div> <div class="product" id="emailmarketing"> <img id="email-marketing" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" /> <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 5%; margin-right: 5%; line-height:1.2; color: rgb(58, 59, 60); ">NNN</p> </div> </div> </div> <div class="arrow-down"></div> <div class="franchisehubtv" style="display:none;"> <div class="franchise-hub-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/franchise-hub-green.png" alt="" width="59" height="59" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Franchise Hub</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Franchise management hubs allow you to support your entire franchise network efficiently and transparently. Branding, invoicing, royalties, products and services, are organized by corporate, and then funneled down through the network as desired. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="cloudbasedtextipad" style="display:flex;"> <div class="cloud-based-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-based-mobile-green.png" alt="" width="70" height="50" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Cloud Based &amp; Mobile</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>We're cloud based and mobile first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="business-analytics" style="display:none;"> <div class="business-analytics-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics-green.png" alt="" width="53" height="53" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Business Analytics</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Our business analytics and reports let you see real-time information on everything from hours worked to open orders and payments accepted. All your important daily figures, at a glance. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="tech-support" style="display:none;"> <div class="tech-support-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support-green.png" alt="" width="54" height="54" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Tech Support</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Whether you, any of your franchisees, or their staff ever need help with BPro software, our support team is a quick online chat, email, or phone call away. </p> <a style="float:right">Learn More</a> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> </div> <div class="order-management" style="display:none;"> <div class="order-management-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management-green.png" alt="" width="43" height="52" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Order Management</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Control your sales pipeline with our customizable and consistent order management system. Reference current orders, create new ones, duplicate existing orders and more. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="employee-management" style="display:none;"> <div class="employee-management-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management-green.png" alt="" width="59" height="59" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Employee Managment</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Simplify your human resources and keep track of important details like employee start dates, birthdays, and payroll, all while being able to keep track of where and when everyone is being most effective. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="white-label" style="display:none;"> <div class="white-label-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label-green.png" alt="" width="59" height="59" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">White Label</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Sure, we made BPro, but we want it to really be your business software. Your templates, your colours, your logo, your language. </p> <a style="float:right;">Learn More</a> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> </div> <div class="brand-control" style="display:none;"> <div class="brand-control-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control-green.png" alt="" width="57" height="57" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Brand Control</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Control your brand across all locations, even internationally with our customizable templates, logo, language and branded colour options. No two locations will ever generate different invoices ever again (unless you want them to). </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="lead-tracking" style="display:none;"> <div class="lead-tracking-text"> <img id="lead-tracking" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking-green.png" alt="" width="50" height="50" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Lead Tracking & CRM</h6> <p style="font-family:'Roboto';font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Take your sales and customer service to the next level with a customer relationship manager designed specifically with franchises and multi-location businesses in mind. Featuring automation, filtering and more. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="custom-invoicing" style="display:none;"> <div class="custom-invoicing-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing-green.png" alt="" width="51" height="50" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Custom Invoicing</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Our custom invoicing lets you create consistent, professional and personalized invoices that link directly to a payment processing system. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="goal-setting" style="display:none;"> <div class="goal-setting-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting-green.png" alt="" width="50" height="51" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Goal Setting</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>Goals are important! Make sure they're communicated throughout your franchise network with our goal setting tool. Different goals for different locations or hubs? No problem. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div> <div class="email-marketing" style="display:none;"> <div class="email-marketing-text"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing-green.png" alt="" width="51" height="52" style="margin-bottom:10%;"> <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Email Marketing</h6> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;">Software that works the way you do</p> <div class="product-quotes"> <p>With a franchise or multi-location business, we know you don't always want all customers to be connected to the same email campaign, that's why we established an integration with Emma. Keep things running with automated campaigns and customer info pushes from BPro to Emma. </p> <a style="float:right;">Learn More</a> </div> </div> <div class="tvs"> <div class="tv"> <img src="" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081"> </div> </div> </div>

解决方案2
 2  2018-05-31 17:57:36

我认为您应该放弃内联CSS并开始使用类。 这是三角形问题的更干净的解决方案。 

<script type="text/javascript">
   var $product = $('.product');
   var $triangle = $('.arrow-down');

   $product.on('click', onProductClick);

   function onProductClick(){
      // If you have already clicked on the item
      if($(this).hasClass('clicked')){
         $triangle.hide();
      }else{
         $triangle.show();
      }

      $product.removeClass('clicked');
      $(this).addClass('clicked')
   }
</script>

解决方案3
 1  2018-05-31 17:43:41

我尝试使用$('.arrow-down').css('display', 'none'); 在你的小提琴中对我有用。 我不确定为什么它对您不起作用。

您还应该创建1个函数来将所有div的显示设置为无，然后将所选的div更改为display：flex。 这样可以删除许多复制粘贴代码，使您可以更轻松地添加和删除选项，并大大减少了代码量。 这也应该使用颜色和背景色来完成。 

("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');
    $('.arrow-down').css('display', 'none');
  } else {
    $('.arrow-down').css('display', 'block');
    $('#franchisehub').css('background-color', 'green');
    $('#franchisehub p').css('color', 'white');

    // ... Remaining part of your else statement
    // Change the colors of all divs
    // This should be in another generic function

    // Hide all divs and then display the selected one
    hideAll()
    $('.franchisehubtv').css('display', 'flex'); 
  }
});


function hideAll(){
    $('.franchisehubtv').css('display', 'none');
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何制作倒置的倒三角形图案 如何显示/隐藏div点击图片 单击时显示/隐藏图像 如何在点击时显示图像，并在再次点击时再次隐藏它 Sencha Touch：如何通过单击隐藏图像 如何使用jQuery或JavaScript在缩略图上单击以隐藏和显示图像 jQuery 图片点击隐藏/显示 在单击图像时显示和隐藏div？ Bootstrap在手风琴上隐藏图像单击 在按钮单击上隐藏并显示图像
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM