Display a CSS box continuously

I have a code for a dropdown function that is working smoothly. Now I would like the comment box to show permanently when clicked and close when clicked outside of it.

Currently, when I click on the comment, the box shows up but if I try to input a comment by dragging my mouse, the box closes. How can I make sure the box stays open?

.dropdown {
position:relative;
}

.dropdown-menu {
position:absolute;
top:100%;
left:0;
z-index:1000;
display:none;
float:left;
min-width:300px;
list-style:none;
background-color:#fff;
border:1px solid rgba(0,0,0,0.2);
border-right-width:2px;
border-bottom-width:2px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
margin:1px 0 0;
padding:4px 0;

.navbar .dropdown-menu:after {
position:absolute;
top:-6px;
left:10px;
display:inline-block;
border-right:6px solid transparent;
border-bottom:6px solid #fff;
border-left:6px solid transparent;
content:'';

.open .dropdown-menu {
display:block;
}

<span class="navbar">
            <span class="dropdown">
                <a data-toggle="dropdown" class="comment" href="#">Comment</a>
                <ul class="dropdown-menu">
                    <li><input type="text"></li>
                </ul>
            </span>
            </span>
javascriptjquerycss

Answer №1

It seems like you are looking for something similar to this http://jsfiddle.net/H3Vnw/1/. Here's the code snippet:

$('.comment').click(function(){
    $('.dropdown-menu').css({'display': 'block'});
});

UPDATED

Try using this revised code:

var com = $('.comment');
var menu = $('.dropdown-menu');

com.click(function() {
    menu.show(); return false;
});

$(document).click(function() {
    menu.hide();
});

menu.click(function(e) {
    e.stopPropagation();
});

For reference, check out this link: http://jsfiddle.net/H3Vnw/4/

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

problem involving the html <pre> element

I have a request that needs to be fulfilled. Requirement: key - this is the value type - this is the type value Currently, I am utilizing the <pre> tag. However, the output appears as follows: key1: this is the value type1 : this is the ...

htmlcss

Arrange a List in immutable.js by using an array of index values

My scenario involves working with an Immutable list to populate a drag and drop feature. The list items do not have any ids, only indices when mapped through. const list = Immutable.List([{"alias":"cat"},{"alias":"dog"},{"alias":"rat"}]) Upon dragEnd, I ...

javascriptarraysimmutable.jsimmutablelist

Obtain the URL linked to the button that was just clicked

As a newcomer to jQuery, I have a question: For instance, on a webpage with a voting feature, when a button is clicked, a counter is increased by +1. Now, how can the URL of this button be displayed on a website? This way, if the URL is shared with others ...

phpjavascriptjquerymysqlajax

Guide on syncing Bootstrap 4 sliders using a single set of controls

Is it possible to synchronize a bootstrap 4 carousel with controls to a carousel without any controls? 1) When the control arrows are clicked, both carousels will slide simultaneously. 2) Hovering over either carousel will pause both carousels from slidi ...

javascripthtmlcssbootstrap-4

Adding a caption aligned to the right edge of an image in Wordpress

Any suggestions on aligning an image caption under an image tag to its right hand edge? I attempted using a div, but it seems it's not allowed in WordPress. Can anyone recommend alternative CSS or tags that I could use for this purpose? ...

htmlcsswordpressimagecaption

Having trouble figuring out the process of mapping and showcasing data within a React application

On my backend server, I have data displaying in the following format: https://i.stack.imgur.com/f0bfN.jpg I am looking to present this data on my frontend react app. I have attempted the following so far- import {useState, useEffect} from 'react&a ...

javascriptjsonreactjs

Executing a function within setInterval in useEffect is a common practice in JavaScript programming

Is there a way to call a function within the setInterval function of the useEffect hook? useEffect(() => { const timeoutId = setInterval(() => {getTime}, 1000); // this is Line 8 return function cleanup() { clearTimeout(time ...

javascriptreactjssetintervaluse-effect

Issue with Saving Modal in Bootstrap 5: Button Does Not Function

I've been following the instructions on , but I'm facing an issue with getting the save button to work on my modal. Initially, I tried placing it within the form tag, but it ended up using the form action from the main view instead of the partial ...

javascriptasp.net-mvcasp.net-corebootstrap-modalbootstrap-5

What is the best way to display JSON data in a readable format?

I received a JSON file with the following structure: { "data":{ "uuid":"123", "name":"TestData", "alias":null, "created_at":"2021-03-17T11:57:29.000000Z&q ...

javascriptjsonreactjs

Unable to retrieve the /socket.io/socket.io.js file in the client-side application

My server side application is currently hosted on heroku: The code snippet that is relevant to this issue is as follows: const express = require('express'), app = express(), server = require('http').createServer(app), ...

javascriptnode.jsexpresssocket.io

What steps do I need to follow to write this function in TypeScript?

I am encountering a problem when building the project where it shows errors in 2 functions. Can someone please assist me? The first error message is as follows: Argument of type 'IFilmCard[] | undefined' is not assignable to parameter of type &a ...

javascripttypescriptnext.js

Is there a way to raise an error in React Native and make it visible?

I am working on a functional component where I need to call a method from another .js file. The method in the external file intentionally throws an error for testing purposes, but I want to propagate this error up to the functional component's method. ...

javascriptreactjsreact-native

Using Javascript's .replace() method to preserve HTML elements

This is a JavaScript function I wrote function replaceCharacters(text_input){ return text_input .replace(/O/g, 0) .replace(/I/g, 1) .replace(/o/g, 0) .replace(/i/g, 1) .replace(/t/g, 4) .replace(/d/g, 9) ...

javascripthtml

Guide on placing a featured image in a div element within genesis theme

I'm encountering a minor issue when trying to work with the genesis framework. My objective is to have each post's featured image inside a div with the same class. I aim to be able to set a background image for the outer div so that when a user h ...

phpcsshtmlwordpressgenesis

Triggering a check event for a jQuery checkbox nested within a ul and li element

I've been working on a code snippet to handle checkbox check events: <html> <head> <style> #leftPane { width: 200px; height: 500px; border: 1px solid; float: left; } #rightPane { ...

javascriptjqueryhtml

The jQuery ajaxError() function triggers if the user navigates away from the page before it has fully loaded

We have implemented a global ajaxError() handler using jQuery to notify users of any AJAX failures: $(document).ajaxError(function() { $("There was a network or server error. Please try again later.").dialog({ title: "Error", mod ...

jqueryajaxglobalhandler

Classroom dynamics shifting among the youth

I am working with a 2D array called "active[][]" containing 0s and 1s. Let's take a closer look at my HTML structure: <div class="place"> <div class="bigbaractive">1</div> <div class="smallbar"><div class="lock2">&l ...

jqueryclasschildren

Move the perspective of Google Maps to a new location with

As a web designer working on my new portfolio site, I've encountered a challenge. I'm using Gowalla's API to display my latest checked-in spots on a Google map. However, I'm facing an issue where I want the map to pan to a specific loca ...

jquerygoogle-maps

What is the method for importing a saved HTML into a WebView?

My WebView is supposed to load manipulated HTML saved in /klw.html. I am using the code mWebView.loadUrl("file:///android_asset/klw.html");. However, when testing it on the emulator, I keep getting a "Webpage not available" error. What could be causing thi ...

androidhtmlcssjsoup

Customized style sheets created from JSON data for individual elements

One of the elements in the API requires dynamic rendering, and its style is provided as follows: "elementStyle": { "Width": "100", "Height": "100", "ThemeSize": "M", "TopMargin": "0", " ...

javascriptcssangularjsdynamic-css