Раскрывающееся меню пользовательского интерфейса скрыто внутри div - PullRequest
0 голосов
/ 03 апреля 2020

Раскрывающееся меню на основе пользовательского интерфейса, в этом внешнем div с переполнением: скрыто, что влияет на внутренний div с выпадающим меню. Может ли кто-нибудь помочь мне в выявлении ошибки, которую я сделал. Спасибо заранее. Я приложил упрощенный код, который мне нужно уточнить

<!DOCTYPE html> 
<html><head> 
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery- 
ui.css'rel='stylesheet'> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<style> 
    .ui-menu { 
        width: 18em;
       height:4em;
         position: absolute;
        z-index:99;
 overflow:visible;          
    }

#ss{

overflow-y: hidden;
overflow-x: scroll;
position: absolute;
top: 3px;
left: 80px;
height: 10%;
width: 30%;
white-space: nowrap;
}
.ui-menu .ui-menu-item 
{
   position: absolute;
   z-index:99;
   overflow:visible;    
}
.ui-menu-item
{
 position: relative;
   z-index:99;
 overflow:visible;  
}


</style> 
</head> 

<body> 
<br><br><br><br> 

<div id=display></div> 

<br><br> 
<div id="ss">
 <ul id='my_cs_menu1' class='inner'> 

 <li> 
        <div>Programming</div> 

        <ul> 
            <li> 
                <div>Backend</div> 
                <ul> 
                    <li> 
                        <div>PHP</div> 
                    </li> 
                    <li> 
                        <div>Python</div> 
                    </li> 
                    <li> 
                        <div>JSP</div> 
                    </li> 
                </ul> 
            </li> 

        </ul> 
    </li> 


  </ul> 
   </div>

   <script> 
    $(document).ready(function() { 
        $("#my_cs_menu1").menu({ 
            blur: function(event, ui) { 
                $('#display').html(" <b>Moved From: </b>" 
                        + ui.item.text()); 
            } 
        }); 
         $("#my_cs_menu2").menu({ 
            blur: function(event, ui) { 
                $('#display').html(" <b>Moved From: </b>" 
                        + ui.item.text()); 
            } 
        }); 
    }) 
       </script> 
    </body> 

   </html>  

Причина, по которой у меня есть внешний div с прокруткой, заключается в том, что мне нужно перетащить несколько div в этот div. выпадающий список мне нужно уточнить

когда я перетаскиваю div (код_группы) из одного контейнера в левом измерении в столбец div (внешний div), пожалуйста, передайте изображение, которое я прикрепил, мне нужно добавить div с выпадающим меню. Большее количество div я перетащу в столбец div, поэтому столбец div будет иметь стиль = "overflow-x: scroll; overflow-y: hidden", внутренний div, то есть div, который я перетаскиваю в столбец div, также применяется стиль не в состоянии правильно просматривать div, который скрыт внутри div.Пожалуйста, помогите мне исправить проблему, с которой я сталкиваюсь

мне нужно, чтобы раскрывающийся список работал, как изображение, которое я прикрепил ниже div с меню UI я WI sh для просмотра, как это, пожалуйста, обратитесь к этому

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...