0

I need to make show sub menu on click,I tried to do it by custom j query.

I have menu structure like this,

<ul class="vc_grid-filter vc_clearfix vc_grid-filter- vc_grid-filter-size-md vc_grid-filter-center vc_grid-filter-color-" data-vc-grid-filter="product_cat">
    <li class="vc_active vc_grid-filter-item parent"><a class="dropdown-toggle"><span data-vc-grid-filter-value=".vc_grid-term-61">Product by Doctors</span></a>
        <!-- fix whitespace
                -->
    </li>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-62">GP</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-63">Paediatrics</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-64">Physician</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-65">Orthopaedic</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-66">Gynaecology</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-67">Dentists</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-68">General Surgeon</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-69">ENT</span></li>
    </ul>
    <li class="vc_active vc_grid-filter-item parent"><a class="dropdown-toggle"><span data-vc-grid-filter-value=".vc_grid-term-60">Products by Category</span></a>
        <!-- fix whitespace
                -->
    </li>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-70">Anti Biotic</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-71">Anti-Inflammatory</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-72">Tonics</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-73">Anti Cold and Expectorants</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-74">Antacids and Antiulcer</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-75">Ointments</span></li>
    </ul>
    <ul class="vc_grid-filter-item child">
        <li><span data-vc-grid-filter-value=".vc_grid-term-76">Gastro-Intestinal</span></li>
    </ul>
    <li class="vc_grid-filter-item"><a class="dropdown-toggle"><span data-vc-grid-filter-value="*">Complete Product List</span></a></li>
</ul>

in js folder of the theme, I created the jquery file named drop.js.Here is the code

var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j(".child").hide();
    $("li:has(ul)").click(function(){

        $("ul",this).toggle('slow');
    });
});

and in function.php file code I have added

//this goes in functions.php near the top

function my_scripts_method() {
// register your script location, dependencies and version
    wp_register_script( 'custom_script', get_template_directory_uri() . '/js/drop.js', array('jquery'), '1.0' );
// enqueue the script
    wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Can u please check this code and let me know where I am wrong.It is not working. Thanks

  • Are there any errors on your page? – ngearing Jan 11 '17 at 22:29
1

The issue is with your html structure. It should be

<ul>
   <li>
      <ul>
        <li><a href="">Somwthing</a></li>
      </ul>
  </li>
</ul>
  • Actually its a snap of html code,original code is in basic filter. I added in question,plz check the code. – nehaJ Jan 12 '17 at 5:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.