In general, I tried to create the button myself, but I don’t really know much about JS.

The idea is, <button> , I would like to make an arrow near it (arrow, arrow), when you click on it, the block appears smoothly and, for example, when you select “Download from POISON” - the link in <button> changed, as well as the style (for example background-color , color , etc. also in <button> )

Wanted to "Download from POISON", "Download from Google" - were Font Awesome.

I understand that without my examples, but I just simply did not succeed, there are ideas, and the implementation is lame: (

This is what should happen.

Closed due to the fact that the essence of the question is not clear to the participants: Igor , 0xdb , aleksandr barakin , Enikeyschik , Sergey Gornostaev February 6 at 8:47 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    I would not bother with this "mechanics" and would make a drop-down list with links.

     @import url(https://use.fontawesome.com/releases/v5.7.0/css/all.css); .button { display: block; width: 210px; height: 30px; border-radius: 5px; border: 1px solid #333; color: #333; background: #fff; } .button .placeholder { display: block; width: 100%; height: 30px; padding: 5px 10px; box-sizing: border-box; } .button .placeholder::after { content: ''; display: block; clear: both; } .button .placeholder .text, .button .placeholder i { display: inline-block; float: left; line-height: 20px; } .button .placeholder .text { width: calc(100% - 20px); } .button .placeholder i { width: 20px; } .button .links { display: none; width: calc(100% - 6px); margin: 1px 3px 0; background: #fff; border-radius: 0 0 5px 5px; border: 1px solid #333; border-top: 0; padding: 10px; box-sizing: border-box; } .button .links a { display: block; width: 100%; color: #555; text-decoration: none !important; cursor: pointer; margin-bottom: 3px; } .button .links a:last-child { margin-bottom: 0; } .button .links a:hover { color: red; } .button:hover .links { display: block; } 
     <div class="button"> <div class="placeholder"> <div class="text">Скачать</div> <i class="fas fa-arrow-left"></i> </div> <div class="links"> <a href="#">Скачать с Яндекс.Диск</a> <a href="#">Скачать с Google Drive</a> <a href="#">Скачать с Dropbox</a> </div> </div>

    But if you really want to, then here

     // При нажатии на список с ссылками $('.button .links span').on('click', function() { let links = $(this).data('href'), // Получаем ссылку из data-href linksName = $(this).text(); // Получаем "название" ссылки $(this).closest('.button').find('.text').attr('href', links).text(linksName); // Возвращаемся к самой "ссылке" и добавляем в неё выбранную ссылку, ну и добавляем название, так, чисто для визуализации. }); // Проверка на "скачать", что ссылки нет (отмена перенаправления) $('.button .text').on('click', function() { let link = $(this).attr('href'); if (link == '' || link == '#' || link == '/') return false; }); 
     @import url(https://use.fontawesome.com/releases/v5.7.0/css/all.css); .button { display: block; width: 210px; height: 30px; border-radius: 5px; border: 1px solid #333; color: #333; background: #fff; } .button .placeholder { display: block; width: 100%; height: 30px; padding: 5px 10px; box-sizing: border-box; } .button .placeholder::after { content: ''; display: block; clear: both; } .button .placeholder .text, .button .placeholder i { display: inline-block; float: left; line-height: 20px; } .button .placeholder .text { width: calc(100% - 20px); text-decoration: none !important; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .button .placeholder i { width: 20px; } .button .links { display: none; width: calc(100% - 6px); margin: 1px 3px 0; background: #fff; border-radius: 0 0 5px 5px; border: 1px solid #333; border-top: 0; padding: 10px; box-sizing: border-box; } .button .links span { display: block; width: 100%; color: #555; text-decoration: none !important; cursor: pointer; margin-bottom: 3px; } .button .links span:last-child { margin-bottom: 0; } .button .links span:hover { color: red; } .button:hover .links { display: block; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button"> <div class="placeholder"> <a href="#" class="text">Скачать</a> <i class="fas fa-arrow-left"></i> </div> <div class="links"> <span data-href="#">Скачать с Яндекс.Диск</span> <span data-href="#">Скачать с Google Drive</span> <span data-href="#">Скачать с Dropbox</span> </div> </div>

    • It worked, and added a couple of ideas, see I did <span class="dropdownbutt"> <i.....> </span> for the button, how to implement the opening of the block just by pressing the span ? >> Here is a screen << - Topper-H
    • Can you fill in jsfiddle , for example, and throw it here? - CbIPoK2513 6:39 pm