Отображение диаграмм по щелчку из выпадающего меню - PullRequest
Новая
       31

Отображение диаграмм по щелчку из выпадающего меню

0 голосов
/ 31 марта 2020

Возможно, вопрос с легким ответом, но я застрял. Я хотел бы продемонстрировать любую конкретную диаграмму c из выпадающего меню, чтобы при нажатии на диаграмму человек отображал ее на той же странице, а если ему нужно посмотреть другую диаграмму, он просто меняется, выбирая новую. HTML: 

            <nav class="navbar navbar-expand-lg navbar-light bg-secondary">
          <a class="navbar-brand" href="#">INSERT LOGO HERE</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Charts  
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item dropdown-toggle" href="#">Line Charts</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Line Chart</a></li>
                                    <li><a class="dropdown-item" href="#">Dashed Line Chart</a></li>
                                    <li><a class="dropdown-item" href="#">Multi Series Line Chart</a></li>
                                    <li><a class="dropdown-item" href="#">Line Chart with Zoom and Pan</a></li>
                                    <li><a class="dropdown-item" href="#">Line Chart with Data Marker</a></li>
                                    <li><a class="dropdown-item" href="#">Line Chart with Logarithmic Axis</a></li>
                                    <li><a class="dropdown-item" href="#">Line Chart with Axis / Scale Break</a></li>
                                    <li><a class="dropdown-item" href="#">Line Chart with Multiple Axes</a></li>
                                    <li><a class="dropdown-item" href="#">Spline Chart</a></li>
                                    <li><a class="dropdown-item" href="#">Multi Series Spline Chart</a></li>
                                    <li><a class="dropdown-item" href="#">Dynamic Spline Chart</a></li>
                                    <li><a class="dropdown-item" href="#">Spline Chart with Secondary Axis</a></li>
                                    <li><a class="dropdown-item" href="#">Spline Chart with Legends</a></li>
                                    <li><a class="dropdown-item" href="#">Step Line Chart</a></li>
                                    <li><a class="dropdown-item" href="#">Multi Series Step Line Chart with Null Data</a></li>
                                </ul>
                            </li>

JavaScript

$( document ).ready( function () {
$( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
    var $el = $( this );
    $el.toggleClass('active-dropdown');
    var $parent = $( this ).offsetParent( ".dropdown-menu" );
    if ( !$( this ).next().hasClass( 'show' ) ) {
        $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
    }
    var $subMenu = $( this ).next( ".dropdown-menu" );
    $subMenu.toggleClass( 'show' );

    $( this ).parent( "li" ).toggleClass( 'show' );

    $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
        $( '.dropdown-menu .show' ).removeClass( "show" );
        $el.removeClass('active-dropdown');
    } );

     if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
        $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
    }

    return false;
} );

});

...