Question

从小屏幕查看时，我试图将Woocommerce单一产品标签更改为手风琴。我无法解决任何（好的）解决方案，因此我尝试使用在Codepen上找到的代码，并对其进行修改以满足我的需要：https://codepen.io/gsarig/pen/GWgNdx
为此，我将类更改为woocommerce类，并使用jquery修改了html，因此它将与代码笔代码匹配：

$(".woocommerce-Tabs-panel").each(function(){
$(this).children().wrapAll("<div class='item-content'></div>")
});
$(".woocommerce-tabs").each(function(){
$(this).children().wrapAll("<nav class='tabs'></nav>")
});
$('.woocommerce-tabs ul.tabs').removeClass('tabs');

所以我的html看起来应该是正确的（根据codepen上的演示），但是移动设备上没有任何显示。这是当前的html标记：

<div class="woocommerce-tabs wc-tabs-wrapper">
<nav class="tabs"> /*This is a new tag that doesn't exist in woocommerce */
    <ul class="wc-tabs" role="tablist"> /*I have removed class tabs from ul to avoid duplicates  */
    <li class="description_tab active" id="tab-title-description" role="tab" aria-controls="tab-description">
    <a href="#tab-description">Description</a></li>
    <li class="benefits_tab" id="tab-title-benefits" role="tab" aria-controls="tab-benefits">
    <a href="#tab-benefits">Benefits </a></li>              
</ul>
</nav>

<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab" id="tab-description" role="tabpanel" aria-labelledby="tab-title-description" style="display: block;">
<div class="tab-content"> /*This is a new tag that doesn't exist in woocommerce */
<p>Lorem ipsum</p>
</div>
</div>
.
.
.

这是修改后的CSS

.woocommerce-tabs .tabs {
 display: none;
}
.woocommerce-tabs .woocommerce-Tabs-panel {
min-height: 2em;
}
.woocommerce-tabs .woocommerce-Tabs-panel::before {
content: attr(data-title);
}
.woocommerce-tabs .woocommerce-Tabs-panel  .item-content{
opacity: 0;
visibility: hidden;
height: 0;
}
.woocommerce-tabs .woocommerce-Tabs-panel.active  .item-content{
opacity: 1;
visibility: visible;
height: auto;
}

@media all and (min-width: 800px) {
.woocommerce-tabs .tabs {
 display: block;
 }
 .woocommerce-tabs .tabs li {
  display: inline-block;
 }
.woocommerce-tabs .tabs li a {
 display: block;
 }
.woocommerce-tabs .woocommerce-Tabs-panel {
 min-height: 0;
}
.woocommerce-tabs .woocommerce-Tabs-panel::before {
display: none;
}
.woocommerce-tabs.tabs-side .tabs {
width: 150px;
float: right;
}
.woocommerce-tabs.tabs-side .tabs li {
display: block;
}
.woocommerce-tabs.tabs-side .woocommerce-Tabs-panel {
margin-right: 150px;
}
}

这是经过修改的Jquery：

tabControl();
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
tabControl();
}, 250);
});
function tabControl() {
var tabs = $('.woocommerce-tabs').find('.tabs');
if(tabs.is(':visible')) {
tabs.find('a').on('click', function(event) {
  event.preventDefault();
  var target = $(this).attr('href'),
      tabs = $(this).parents('.tabs'),
      buttons = tabs.find('a'),
      item = tabs.parents('.woocommerce-tabs').find('.woocommerce-Tabs-panel');
  buttons.removeClass('active');
  item.removeClass('active');
  $(this).addClass('active');
  $(target).addClass('active');
  });
 } else {
 $('.woocommerce-Tabs-panel').on('click', function() {
  var container = $(this).parents('.woocommerce-tabs'),
      currId = $(this).attr('id'),
      items = container.find('.woocommerce-Tabs-panel');
  container.find('.tabs a').removeClass('active');
  items.removeClass('active');
  $(this).addClass('active');
  container.find('.tabs a[href$="#'+ currId +'"]').addClass('active');
  });
 } 
}

有人可以告诉我我在做什么错吗？

修改Woocommerce选项卡以在移动设备上使用手风琴

0 个答案: