问题[dropdown]

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </div> 
</div>

$(document).ready(function () {
    $(".textblock4").click(function() {
        $(this).next(".dropdowntext4").slideToggle(100);
    })  
});

.section4 {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.sectioncontent4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 1350px;
    max-width: 1350px;
    margin: 70px 0 90px 0;
}

.headingtext4 {
    display: flex;
    justify-content: start;
    width: 100%;
    max-width: 100%;
    font-family: CeraPro;
    font-style: normal;
    font-weight: bold;
    font-size: 48px;
    line-height: 60px;
    color: #E63D63;
}

.dropdownblocks4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 40px;
    width: 100%;
    max-width: 100%;
    margin: 70px 0 0 0;
}

.block4 {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.textblock4 {
    font-family: CeraPro;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    color: #6C0C52;
    cursor: pointer;
    user-select: none;
    margin: 10px 0 0 0;
}

.dropdowntext4 {
    display: none;
    font-family: CeraPro;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    margin: 10px 0 0 0;
}

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div class="section4">
        <div class="sectioncontent4">
            <span class="headingtext4">
                Основные направления исследований
            </span>
            <div class="dropdownblocks4">
                <div class="block4">
                    <img src="img/icons/0011.png">

                    <span class="textblock4">
                        Исследование рынка
                    </span>

                    <div class="dropdowntext4">

                        <li>объем в денежном и натуральном выражении</li>
                        <li>оценка структуры и объёма рынка</li>
                        <li>подбор выгодного поставщика</li>
                        <li>структура по сегментам</li>
                        <li>отраслевые и региональные особенности</li>
                        <li>уровень конкуренции</li>
                        <li>динамика развития и тенденции</li>
                        <li>факторы влияющие на конъюнктуру рынка</li>
                        <li>риски и возможности для роста</li>
                    </div>
                </div>
                <div class="block4">
                    <img src="img/icons/0013.png">
                    <span class="textblock4">
                        Анализ конкурентов
                    </span>
                    <div class="dropdowntext4">
                        <li>выявление главных конкурентов и их доли</li>
                        <li>обзор и сравнительный анализ компаний</li>
                        <li>маркетинговые стратегии</li>
                        <li>ценовая и сбытовая политика</li>
                        <li>потенциальные цели</li>
                        <li>выявление сильных и слабых сторон (SWOT-анализ)</li>
                    </div>
                </div>
                <div class="block4">
                    <img src="img/icons/0041.png">
                    <span class="textblock4">
                        Изучение потребителей
                    </span>
                    <div class="dropdowntext4">
                        <li>анализ спроса</li>
                        <li>анализ клиентов и потребительского поведения</li>
                        <li> сегментирование потребителей</li>
                        <li> факторы влияющие на лояльность к поставщикам</li>
                        <li> построение моделей потребительского поведения</li>
                        <li> ценовые ожидания</li>
                    </div>
                </div>
            </div>
        </div>
    </div>