lost9123193 lost9123193 -4 years ago 210
jQuery Question

Collapsible Sidebar with React and Bootstrap

I want to make a collapsable sidebar using Bootstrap and React and I'm following this tutorial.
http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/

I was able to generate a static site, but I can't get the jquery script to work with React. I have a few Jquery files from an old site that I'll be transferring to the new React site. Do I need to take a different approach?

$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});

function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});

Answer Source

Ideally you shouldn't use jQuery with React unless you have a good reason (see this thread). React works by keeping the real DOM synchronised with its own virtual DOM, so it doesn't like it if jQuery tries to manipulate the DOM while React is trying to do its thing.

In your case, you would probably be better off using a React component such as this sidebar component, or this (another sidebar for React)

P.S. React Components is a good place to find other components for React. The community is very active and always adding more.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download