0

ao clicar em uma categoria como na imagem abaixo, é redirecionado a outra página,

inserir a descrição da imagem aqui

que quando você está utilizando seu computador ela abre dessa maneira:

inserir a descrição da imagem aqui

Só que é preciso também utilizar em celulares, porém quando está responsivo é necessário clicar novamente em cima do nome da categoria para que ela abra e mostre as informações.

inserir a descrição da imagem aqui

Após clicar novamente:

inserir a descrição da imagem aqui

Não posso alterar nada no código fonte pois meu chefe não autorizou fazer isso :( , ele quer apenas uma função que ao escolher sua categoria e ser redirecionado, essa categoria ja esteja aberta para o usuário sem precisar clicar novamente para abrir.

Abaixo uma parte do código fonte para ajudar a entender:

index.html (Primeira imagem):

<div class="main-content">
  <div class="w3-categories">
    <h3>Browse Categories</h3>
    <div class="container">
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder1">
          <a class="btn-8" href="categories.html">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-mobile"></i></div>
                <h4 class="clrchg">Mobiles</h4>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder2">
          <a class="btn-8" href="categories.html#parentVerticalTab2">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-laptop"></i></div>
                <h4 class="clrchg"> Electronics & Appliances</h4>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder3">
          <a class="btn-8" href="categories.html#parentVerticalTab3">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-car"></i></div>
                <h4 class="clrchg">Cars</h4>
              </div>
            </div>
          </a>
        </div>
      </div>

Categories.html (Segunda/terceira imagem):

<div class="categories-section main-grid-border">
  <div class="container">
    <h2 class="w3-head">All Categories</h2>
    <div class="category-list">
      <div id="parentVerticalTab">
        <div class="agileits-tab_nav">
          <ul class="resp-tabs-list hor_1">
            <li>Mobiles</li>
            <li>Electronics & Appliances</li>
            <li>Cars</li>
            <li>Bikes</li>
            <li>Furniture</li>
            <li>Pets</li>
            <li>Books, Sports & Hobbies</li>
            <li>Fashion</li>
            <li>Kids</li>
            <li>Services</li>
            <li>Jobs</li>
            <li>Real Estate</li>
          </ul>
          <a class="w3ls-ads" href="all-classifieds.html">View all Ads</a>
        </div>
        <div class="resp-tabs-container hor_1">
          <div>
            <div class="category">
              <div class="category-img">
                <img src="images/cat1.png" title="image" alt="" />
              </div>
              <div class="category-info">
                <h4>Mobiles</h4>
                <span>5,12,850 Ads</span>
                <a href="all-classifieds.html">View all Ads</a>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sub-categories">
              <ul>
                <li><a href="mobiles.html">mobile phones</a></li>
                <li><a href="mobiles.html">Tablets</a></li>
                <li><a href="mobiles.html">Accessories</a></li>
              </ul>
            </div>
          </div>
          <div>
            <div class="category">
              <div class="category-img">
                <img src="images/cat2.png" title="image" alt="" />
              </div>
              <div class="category-info">
                <h4>Electronics & Appliances</h4>
                <span>2,01,850 Ads</span>
                <a href="all-classifieds.html">View all Ads</a>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sub-categories">
              <ul>
                <li><a href="electronics-appliances.html">Computers & accessories</a></li>
                <li><a href="electronics-appliances.html">Tv - video - audio</a></li>
                <li><a href="electronics-appliances.html">Cameras & accessories</a></li>
                <li><a href="electronics-appliances.html">Games & Entertainment</a></li>
                <li><a href="electronics-appliances.html">Fridge - AC - Washing Machine</a></li>
                <li><a href="electronics-appliances.html">Kitchen & Other Appliances</a></li>
              </ul>
            </div>
          </div>
          <div>

Desde já agradeço pela ajuda! :)

2

2 Respostas 2

0

Um modo bem simples, vai precisar mudar só uma coisa nos links do menu:

<a class="btn-8" href="categories.html?cat=Mobiles"> <!-- Passar via get a categoria -->
    <div class="focus-border">
        <div class="focus-layout">
            <div class="focus-image"><i class="fa fa-mobile"></i></div>
            <h4 class="clrchg">Mobiles</h4>
        </div>
    </div>
</a>

E a função:

var li = document.getElementsByTagName('li') // Pega todos <li>
var cat = '<?php echo $_GET["cat"]; ?>' // Cria a variável cat com o valor passado por get 

//Loop passando por todos <li>
for(var i = 0; i < li.length; i++) {
    // Se o texto do li for igual ao texto passado por get chama o evento de click
    if(li[i].innerText == cat)
        li[i].click()
}

Observação: o texto passado por get deve ser igual ao texto dos <li>

Se puder colocar id nos li fica mais fácil:

var cat = '<?php echo $_GET["cat"]; ?>'
var li = document.getElementById(cat)
li.click()
1
  • Guilherme Costamilam, testei aqui e não deu certo :( Fiz as alterações que pediu, porém quando faço o teste utilizando o modo responsivo ta do mesmo jeito.
    – user99842
    5/03/2018 às 16:50
0

Segue o link de referência: https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/blob/master/Index.html

Consegui resolver utilizando esse script, segue abaixo caso alguém precise.

Apenas foi necessário comentar clossed: 'accordion'

 <script type="text/javascript">
        $(document).ready(function() {

            //Vertical Tab
            $('#parentVerticalTab').easyResponsiveTabs({
                type: 'vertical', 
                width: 'auto', 
                fit: true, 
                //closed: 'accordion', 
                tabidentify: 'hor_1', // The tab groups identifier
                activate: function(event) { // Callback function if tab is switched
                    var $tab = $(this);
                    var $info = $('#nested-tabInfo2');
                    var $name = $('span', $info);
                    $name.text($tab.text());
                    $info.show();
                }
            });
        });
    </script>

Você deve fazer log-in para responder a esta pergunta.