When Click on Menu, It Opens, When Click Again It Close

$(document).ready(function() {  "use strict";  $(".dropdown").hide();  $("#smpg-cat-list li span").click(function() {        $(".dropdown").hide();       var $i  = $(this).find("i");    console.log($i);    if ($i.hasClass("fa-plus")) {      $i.removeClass("fa-plus").addClass("fa-minus");      $(this).next('.dropdown').show();    } else {      $i.removeClass("fa-minus").addClass("fa-plus");      $(this).next('.dropdown').hide();    }  });});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul id="smpg-cat-list">  <li><a href="#">Web Design</a>  </li>  <li><a href="#">Robots</a></li>  <li>    <a href="#">Programming</a>    <span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>    <ul class="dropdown">      <li><a href="#">PHP</a></li>      <li><a href="#">C#</a></li>    </ul>  </li>  <li>    <a href="#">Frameworks</a>    <span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>    <ul class="dropdown">      <li><a href="#">Laravel</a></li>    </ul>  </li>  <li><a href="#">Data Analysis</a></li>  <li>    <a href="#">CMS</a>    <span class="toggle" style="cursor:pointer"><i class="fa fa-plus" aria-hidden="true"></i></span>    <ul class="dropdown">      <li><a href="#">WordPress</a></li>      <li><a href="#">Joomla</a></li>    </ul>  </li></ul>

How to make dropdown close or open when I click on the button when there is ref used? (React)

It will be triggering both functions at the same time. Which causes problems. You Have to Include the Hamburger button also in the ref.

  const Navbar = () => {
  const [open, setOpen] = useState(false);

  const ref = useRef();

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!ref?.current?.contains(event.target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);

  return (
    <div className="navbar_container">
      <div className="navbar_inner_container">
        <div className="logo_container">
          <img src={Logo} alt="logo" className="navbar_logo" />
        </div>
        <section ref={ref}>
        <div
          className="hamburger_menu"
          onClick={() => {
            setOpen(!open);
          }}
        >
          <Dropdown open={open}  />
        </div>
</section>
      </div>
    </div>
  );
};

export default Navbar;

const Dropdown = ({ open }) => {
  return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("functions_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Functions</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("partners_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Partner</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("statements_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Statements</button>
          </div>
          <div
            className="dropdown_item"
            onClick={() =>
              window.scrollTo({
                top: document.getElementsByClassName("contact_container")[0]
                  .offsetTop,
                behavior: "smooth",
              })
            }
          >
            <button className="navbar_link">Contact</button>
          </div>
          <img
            src={LanguageFlag}
            alt="lanugage_flag"
            className="language_flag"
          />
        </div>
      ) : null}
    </div>
  );
};

export default Dropdown;

Related Topics