When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () {
    $("#subTopics").hide();
    $("#mainTopics").click(function () {
        $("#subTopics").show("slow");
        
    });
});
body
{
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}


#main-menu {
    position: relative;
}

#main-menu ul {
    margin: 0;
    padding: 0;
}

#main-menu li {
    display: inline-block;
}

#main-menu a {
    display: block;
    width: 100px;
    padding: 10px;
    border: 1px solid;
    text-align: center;
}


#subTopics {
    position: absolute;
    margin-top: 10px;
    width: 100%;
    left: 0;
}

#subTopics ul {
    margin: 0;
    padding: 0;
}

#subTopics li {
    display: block;
}

#subTopics a {
    text-align: left;
}


#column1, #column2, #column3, .columns {
    position: relative;
    float: left;
    left: 125px;
    margin: 0px 5px 0px 0px;
}


#main-menu li:hover {
    text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <header>

    </header>
    <nav>
        <div id="main-menu">
            <ul>
                <li><a href="">Logo</a></li>
                <li><a href="">Home</a></li>
                <li><a href="" id="mainTopics">Topics</a>
                    <div id="subTopics">
                        <div id="column1" class="columns">
                            <ul>
                                <li><a href="">example1</a></li>
                                <li><a href="">example2</a></li>
                                <li><a href="">example3</a></li>
                                <li><a href="">example4</a></li>
                                <li><a href="">example5</a></li>
                                <li><a href="">example6</a></li>
                                <li><a href="">example7</a></li>
                                <li><a href="">example8</a></li>
                                <li><a href="">example9</a></li>
                                <li><a href="">example10</a></li>
                            </ul>
                        </div>

                        <div id="column2" class="columns">
                            <ul>
                                <li><a href="">example11</a></li>
                                <li><a href="">example12</a></li>
                                <li><a href="">example13</a></li>
                                <li><a href="">example14</a></li>
                                <li><a href="">example15</a></li>
                                <li><a href="">example16</a></li>
                                <li><a href="">example17</a></li>
                                <li><a href="">example18</a></li>
                                <li><a href="">example19</a></li>
                                <li><a href="">example20</a></li>
                            </ul>
                        </div>

                        <div id="column3" class="columns">
                            <ul>
                                <li><a href="">example21</a></li>
                                <li><a href="">example22</a></li>
                                <li><a href="">example23</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="">Jobs</a></li>
                <li><a href="">Markets</a></li>
            </ul>
        </div>
    </nav>
    <script src="jquery.js"></script>
    <script src="index.js"></script>
    <script>

    </script>
</body>
</html>

Hello, I am experiencing an issue where when I click on the element 'subtopics', it does not show up as intended. Additionally, upon refreshing the page, there seems to be a flickering effect where the subtopics appear and disappear quickly. Can any experienced web developer help me troubleshoot this problem? Thank you in advance for your assistance. (Apologies for any language barriers) ****My main goal is to have the 'subTopics' dropdown or show up upon clicking, rather than hovering over it.****

javascriptjqueryhtmlcss

Answer №1

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header>

</header>
<nav>
    <div id="main-menu">
        <ul>
            <li><a href="">Logo</a></li>
            <li><a href="">Home</a></li>
            <li><a href="" id="mainTopics">Topics</a>
                <div id="subTopics" class="classSubTopics">
                    <div id="column1" class="columns">
                        <ul>
                            <li><a href="">example1</a></li>
                            <li><a href="">example2</a></li>
                            <li><a href="">example3</a></li>
                            <li><a href="">example4</a></li>
                            <li><a href="">example5</a></li>
                            <li><a href="">example6</a></li>
                            <li><a href="">example7</a></li>
                            <li><a href="">example8</a></li>
                            <li><a href="">example9</a></li>
                            <li><a href="">example10</a></li>
                        </ul>
                    </div>

                    <div id="column2" class="columns">
                        <ul>
                            <li><a href="">example11</a></li>
                            <li><a href="">example12</a></li>
                            <li><a href="">example13</a></li>
                            <li><a href="">example14</a></li>
                            <li><a href="">example15</a></li>
                            <li><a href="">example16</a></li>
                            <li><a href="">example17</a></li>
                            <li><a href="">example18</a></li>
                            <li><a href="">example19</a></li>
                            <li><a href="">example20</a></li>
                        </ul>
                    </div>

                    <div id="column3" class="columns">
                        <ul>
                            <li><a href="">example21</a></li>
                            <li><a href="">example22</a></li>
                            <li><a href="">example23</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="">Jobs</a></li>
            <li><a href="">Markets</a></li>
        </ul>
    </div>
</nav>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>

</script>
</body>
</html>

CSS

#subTopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}

jQuery

$(document).ready(function () {
$("#mainTopics").click(function (event) {
    $(".classSubTopics").hide();
    event.preventDefault()
    $("#subTopics").show("slow");
});

});

Answer №2

Your website can function perfectly fine without relying on jQuery. You have the option to achieve the desired effects using only css.

body
{
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}


#main-menu {
    position: relative;
}

#main-menu ul {
    margin: 0;
    padding: 0;
}
...
... (additional CSS code)
...

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <header>

    </header>
    <nav>
        <div id="main-menu">
            <ul>
                <li><a href="">Logo</a></li>
                <li><a href="">Home</a></li>
                ... (additional HTML code) ...
            </ul>
        </div>
    </nav>
    <script src="jquery.js"></script>
    <script src="index.js"></script>
    <script>

    </script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Ajax request is successfully looping through multiple files, however, it is not properly sending them to the server. As a result, only one file

I have been working on an ajax request that successfully retrieves information about files, such as the number of files, their names, and looping through them. Now, I am faced with the challenge of saving these files to a local folder on my computer. I hav ...

javascriptjavajqueryajaxserverside-javascript

Displaying numerous images/items in a Bootstrap 2.3 carousel

I have been working on a PHP-based website that utilizes Twitter Bootstrap 2.0. Currently, I am retrieving user information from a MySQL database and attempting to display them in separate frames or items within a carousel instead of all at once using a wh ...

phphtmlcsstwitter-bootstrapcarousel

When using Jquery, the search button consistently retrieves the same data upon the initial click event

How can I ensure that my Ajax call retrieves data from the remote database based on the updated search criteria every time I click the search button? Currently, the system retrieves results based on the initial search criteria even after I modify it and cl ...

javascriptajaxspring-mvcjqgrid

Altering Image Order Across Various Slides

I have customized a parallax website template that is divided into various sections and slides. I want to incorporate a fixed image sequence on each slide that animates based on the scroll position. With 91 images in the animation sequence, it moves quickl ...

javascriptjqueryhtmlcss

What is the process for linking to a backend on a distinct port in Next.js?

I am working on a project with Next.js and I am facing a challenge in connecting to a backend server that is running on a different port. The frontend of my application is on port 3000, while the backend is on port 8000. My goal is to interact with the bac ...

javascriptnode.jsnext.js

Scripts in iframes within webviews are not preloading and executing properly

When using the <webview> tag in the renderer process within the <body> of a web page, the following code is used: <webview src="http://somewebpage.com" preload="somescript.js"> The script somescript.js will be execute ...

javascriptnode.jsiframewebviewelectron

How can you eliminate a specific element from an HTML document?

Utilizing localStorage can be tricky when it comes to keeping the JSON file hidden from being displayed on the HTML page. One approach I used involves sending the JSON file to the client once and then performing all logic using that file. To prevent the JS ...

javascriptjsonhtmllocal-storage

Discover the nearest class and smoothly expand it with the slideDown function in jQuery

Hey there, I'm working on implementing a "View More" button on my page. The button will reveal another unordered list that currently has the class of "hidden-list". When the user clicks on "View More", I want it to slideToggle the hidden-list element ...

javascriptjqueryhtmlcss

How to automatically insert a page break after a certain string in an array using JavaScript

I've created a code that is intended to implement page breaks after a specific number of new lines or words. I have defined an array that indicates where these breaks should occur within my element. In the example provided in my jsFiddle, you can see ...

javascriptjquerysplit

Could you provide instructions on how to change mjs files into js format?

Is there a method to change .mjs files to .js files? Some hosting services do not yet support mjs files, so I am interested in converting them to js files. Context: Mozilla's PDFjs has incorporated JavaScript modules (mjs) into their code, but since ...

javascriptmjs

Utilizing Jquery's Selectable IDs in a repetitive manner

I'm a newbie to jQuery and I'm attempting to create two lists where each item can be selected. Check out my code: <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI s ...

javascriptjqueryhtmllistjquery-ui-selectable

"Kindly complete all mandatory fields" - The undisclosed field is preventing me from submitting

I am facing an issue with my WordPress page that has Buddyboss installed along with Elementor pro as the Pagebuilder. The Buddyboss plugin provides Facebook-like functions on the website. While it is easy to comment on posts within the Buddy Boss system, I ...

javascripthtmlcsswordpressblogs

Trigger a jQuery function upon clicking a button

I am attempting to create a jQuery function that can be called independently, and then trigger the function when a click event occurs. Below is the code I have put together: HTML: <input type="text" class="form-control email_input" name='email&ap ...

javascriptjqueryhtml

Using Node.js to invoke an identifier loop

Having some trouble with this loop. Should I include variable c in the loop as well? Let me provide some context: there is a table and child(i) changes for every row. The SelectorT receives a sentence structured like this: Now\nIs\n09:00\n4 ...

javascriptnode.js

Looking for reliable resources on establishing a connection between a Google account and my application

I am currently working on creating a react native app that aims to simplify the user login process by allowing them to link their Google account with just one click. This way, users won't have to constantly log in every time they use the app. While I ...

javascriptreact-nativegoogle-accountaccount-linking

Include the await keyword within the .then block

I'm trying to execute an await after receiving a response in the .then callback of my code: const info = new getInfo(this.fetchDetails); info .retrieve() .then((res) => { const details = this.getLatestInfo(res, 'John'); }) .ca ...

javascriptnode.jspromiseasync-await

Troubleshooting problem with Safari browser - AJAX Dropdown Menu issue

I have integrated a dynamic dropdown menu (implemented in a php website) that utilizes Ajax functionality to populate the dropdown options. This feature works flawlessly on Chrome and Firefox, but encounters issues on Safari. On Safari, the dropdown func ...

javascriptphpjqueryajaxsafari

Issue encountered with Express.js and connect-mongo session: "TypeError - Unable to access property 'upserted' as it is undefined"

I'm working on implementing session storage using the connect-mongo module, but I keep encountering the following error: TypeError: Cannot read property 'upserted' of undefined Here is how I'm using the connect-mongo: import session ...

javascriptnode.jsmongodbsessionexpress

Express server does not send any response body

When a request is made to my express application, it returns an empty {}. const express = require('express'); const bcrypt = require('bcrypt'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyPar ...

htmlnode.jsexpress

Troubleshooting Problems with CSS Printing on iOS Devices

On desktop (both Windows and Mac), the print preview displays correctly. However, on iOS devices, the full width is not shown and there is some blank space above. The issue I'm facing is that I cannot debug this problem using Browserstack. I am restr ...

cssprinting