代码之家  ›  专栏  ›  技术社区  ›  flash

如何用点击图片隐藏倒三角形?

css html jquery javascript
  •  0
  • flash  · 技术社区  · 7 年前

    我有一个 fiddle 我想要的是 倒三角形 在第二次尝试中单击图像时隐藏。

    小提琴的工作方式是,当点击一个单独的产品行项目时,块也会显示在底部的箭头。

    enter image description here

    (在上面的截图中标记) 是:

    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;
}


    我在fiddle中使用的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');
  }

});


    问题陈述:

    如上所述,小提琴中有两行产品项。单击单个产品项时,块也将显示在底部,并带有箭头,如果我再次单击该产品项,则块将隐藏。我想完成的是,我希望在第二次尝试单击产品项时箭头也隐藏起来。

    在上面的jquery片段中 if logic ,我已经提到 $('.arrow-down').css('display', 'none'); 但似乎没用。

    3 回复  |  直到 7 年前
        1
  •  2
  •   Gerardo BLANCO    7 年前

    我必须删除一些html和js才能使代码片段正常工作。你的代码达到了最大值。

    首先,我建议你做一个更模块化的代码。干-不要重复你自己。我已经添加了函数 resetAll() 所以你可以看看你能做什么。在这个函数中,我把箭头 block .

    后来你做的每一个听众我都添加了 display: none 基于你的 if 条件。

    只有 美国农业协会 和 血脑屏障 工作

    希望这有帮助:> 

    (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
  •   nikksan    7 年前

    我认为你应该抛弃内联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
  •   nalgenes    7 年前

    我试着用 $('.arrow-down').css('display', 'none'); 在你的小提琴里对我有用。我不知道为什么对你不起作用。

    您还应该创建1个函数,将所有div的显示设置为none,然后将所选的函数更改为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');
}
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    5 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    5 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    5 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    5 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    5 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    6 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    6 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    6 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    6 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    6 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号